Day17 CSS位置position介紹

2021 iThome 鐵人賽

DAY 17

Modern Web

我的網頁前端小小小教室系列第 17 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-10-01 16:34:22

1031 瀏覽

今天我們要介紹的是CSS重要屬性position，在排版中我們會遇到許多不同的情況，而利用position可以幫助我們解決這些問題。接下來就讓我們了解position可以設定哪些屬性吧!

position: static | relative | fixed | absolute

position: static; 預設

當div方框設定成static時。代表是預設值，會造著瀏覽器的配置自動排版在網頁上，所以top、bottom、left、right 設定沒有意義。

<style>
       .static{
           border: 5px solid blue;
           width: auto;
           height: 200px;
       }
</style>
<body>
    <div class="static">
        <p>預設值，設定top、left、button、right都沒有用</p> 
    </div>
</body>

position: relative; 相對位置

當div方框設定成relative時，如果沒有添加top、left、button、right等其他屬性時，就會像static一樣在原本的瀏覽器設置的位置，不過設定了以後就可以從原本的位置做移動調整。基準是以原本設定的位置。

.static{
    position: static;
    border: 5px solid blue;
    width: 800px;
    height: 100px;
}

.relative{
    position: relative;
    border: 5px solid yellow;
    width: 500px;
    height: 200px;
}
<body>
    <div class="static">
        <p style="font-size: 20px;">預設值，設定top、left、button、right都沒有用</p> 
    </div>
    <div class="relative">
        <p>相對位置</p>
    </div>
</body>

這是還沒有設定top、left、button、right時，就在預設的位置。

而在.relative內加上top跟left的位移後，就會從原本位置移動到相對位置。

       .relative{
           position: relative;
           border: 5px solid yellow;
           width: 500px;
           height: 200px;
           top: 20px;
           left: 100px;
       }

position:fixed; 固定定位

固定定位會將div方框固定在瀏覽器視窗的位置，不論頁面怎麼滾動，他都還是會在同個位置，頁面下拉時也不會消失。且不受其他定位的影響。

       .static{
           position: static;
           border: 5px solid blue;
           width: 800px;
           height: 100px;
       }

       .relative{
           position: relative;
           border: 5px solid yellow;
           width: 500px;
           height: 200px;
           top: 20px;
           left: 100px;
       }

       .fixed{
           position: fixed;
           width: 300px;
           height: 150px;
           border: 5px solid  violet ;
           top: 0;
           right: 0;
       }
    <body>
        <div class="static">
            <p style="font-size: 20px;">預設值，設定top、left、button、right都沒有用</p> 
        </div>
        <div class="relative">
            <p>相對位置</p>
        </div>
        <div class="fixed">
            <p>固定位置</p> 
        </div>
    </body>

position:absolute; 絕對位置

絕對位置absolute需要有relative來搭配，可以想像需要有個爸爸(relative)包住兒子(absolute)，若是外層沒有包住的話，就會以body為基準調整定位，而一開始都是定位在左上角。不太理解的話讓我們看看下面這張圖。

.static{
           position: static;
           border: 5px solid blue;
           width: 800px;
           height: 100px;
       }

       .relative{
           position: relative;
           border: 5px solid yellow;
           width: 500px;
           height: 200px;
           left: 100px;
       }

       .fixed{
           position: fixed;
           width: 300px;
           height: 150px;
           border: 5px solid  violet ;
           right: 0;
           top: 0;
       }

       .absolute{
           position: absolute;
           border: 5px solid green;
           width: 50px;
           height: 50px;
           top: 20px;
              
       }

       .test{
           position: relative;
           width: 300px;
           height: 200px;
           border: 5px solid grey;
       }
    <body>
        <div class="static">
            <p style="font-size: 20px;">預設值，設定top、left、button、right都沒有用</p> 
        </div>
        <div class="relative">
            <p>相對位置</p>
        </div>
        <div class="fixed">
            <p>固定位置</p> 
        </div>
        <div class="test">
            <div class="absolute">
            <p>絕對位置</p>
            </div>
        </div>
        
    </body>

絕對定位會定位在相對定位的左上角，而也可以調整他的位置。

       .absolute{
           position: absolute;
           border: 5px solid green;
           width: 50px;
           height: 50px;
           top: 40px;
           left: 20px;  
       }

在absolute裡加上top: 40px; left: 20px;

就會以爸爸(relative)為基準點(左上角)去做移動。