iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

html與css粗淺新手入門教學系列 第 21

css position

今天介紹position中的四個屬性:static、relative、absolute、fixed
先創造出三個不同顏色的方塊,css設定如下

        .box1, .box2, .box3{
            height: 300px;
            width:300px;
            color: white;
            font-size: 30px;
            display: inline-block;
        }

static

static是預設的狀態,被設定為static時left、right、top、bottom等改變位置的語法都不會作用

        .box2{
            position: static;
            left: 50px;
            top:50px;
        }

https://ithelp.ithome.com.tw/upload/images/20210921/20140086gvmSgOfYi0.jpg

relative

relative就是相對的意思,代表其他的物體會受到它的影響

        .box2{
            position: relative;
            left: 50px;
            top:50px;
        }

https://ithelp.ithome.com.tw/upload/images/20210921/20140086twpZYTgJy6.jpg
可以觀察到位移元素發揮了作用,並且兩個box之間還保留著box2本來占有的區域

absoluate

absolute就是絕對的意思,代表其他物體不會受到它的位置影響

        .box2{
            position: absolute;
            left: 50px;
            top:50px;
        }

https://ithelp.ithome.com.tw/upload/images/20210921/20140086qx9nrVwPs5.jpg
可以看出方塊發生了位移,但是位移的起始位置是畫面的左上角,而不是box1的右方,並且box1和box3之間沒有保留原來的空位
值得注意的是,當位移數值設為0時

        .box2{
            position: absolute;
            left: 0px;
        }

物體會出現在最角落
https://ithelp.ithome.com.tw/upload/images/20210921/20140086klDgjkd8g7.jpg
但是當沒有設定任何位移元素時

        .box2{
            position: absolute;
        }

box2則會因為排列順序而出現在box1的右方https://ithelp.ithome.com.tw/upload/images/20210921/20140086iXLOLQpslz.jpg

fixed

fixed是固定的意思,代表不管網頁如何滾動,他都會待在設定好的位子

        .box2{
            position: fixed;
            left: 50px;
            top:50px;
        }

這是在網頁最上緣的樣子
https://ithelp.ithome.com.tw/upload/images/20210921/20140086RMsydUform.jpg
即使往下滾動也依然待在同樣的位子
https://ithelp.ithome.com.tw/upload/images/20210921/20140086ssI0KoNboE.jpg


上一篇
css z-index
下一篇
css visibility
系列文
html與css粗淺新手入門教學30

尚未有邦友留言

立即登入留言