浮動視窗

在這個範例中要練習固定的浮動視窗，類似我們常看到的側邊廣告，位置不會隨著視窗滑動而改變

1.position: fixed

使用屬性position: fixed (固定定位)，此屬性就會自己獨立一層，會依照瀏覽器視窗來定位，使用後即便頁面捲動，它還是會固定在相同的位置，會使用top、right、bottom和left屬性來定位。

2.position: relative

使用屬性position: relative (相對定位)，此屬性跟預設值static一樣，除非去特別設定他的數值就可以製作位置的偏移，並不會將物件獨立一層，使用這個屬性物件還是會隨著頁面捲動，會使用top、right、bottom和left屬性來定位。

3.position: absolute

使用屬性position: absolute (絕對定位)，如果物件設定了absolute，就會自己獨立一層不會與其它物件有任何關連，它的定位依據是去尋找父層容器是否有可以被定位的物件，使用這個屬性物件還是會隨著頁面捲動，會使用top、right、bottom和left屬性來定位。

以上的介紹可以試著搭配多行的文字去試試看效果

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/NWMbdqO

可參考程式碼如下方:

HTML

<div class="mini_banner">
    <a href="#"><img src="https://i.ibb.co/bmDt170/mini-tea.png" alt="">
        <span>我是廣告</span>
    </a>
</div>

<h1>固定住的廣告</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque soluta, in officiis aut optio iste nam obcaecati provident architecto itaque. Officia consequatur aspernatur pariatur suscipit nemo harum alias, esse velit.</p>

CSS

    .section_test{
    position: relative;
}
.mini_banner{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    z-index: 5;
}
.mini_banner:nth-child(2){
    position: relative;
    top: 300px;
}
.mini_banner:nth-child(3){
    position: absolute;
    top: 700px;
}
.mini_banner span{
    font-size: 24px;
    color: #f7b1b1;
    letter-spacing: 1.2px;
    font-weight:800;
    position: absolute;
    top: 30px;
    left: 100px;
    bottom: 0;
    right: 0;
}
.mini_banner a{
    display: block;
}
.mini_banner img{
    width: 300px;
    aspect-ratio: 1/1;
    vertical-align: middle;
}
p{
    margin: 50px;
}