CSS中定位屬性的使用
CSS中定位屬性的使用
網頁中，大部分元素默認占用檔案流，插入或生成元素后，其將默認按照從左到右的順序依次排列，這將導致頁面中的各種元素因空間占用問題難以被設計至目標效果，
若將整個頁面看做二層透明，底層白色的雙層結構，那我們可以簡單的理解為『大部分元素默認占用底層空間』，但是各種元素共用底層，每個個體都占有自己的一部分空間，那么將導致我們無法把操作的元素放置到俯視視角的目標位置，
為了擺脫底層的空間占用限制，有效利用二層空間幫我們達到目標效果，可以使用CSS中的定位屬性，添加了定位屬性的元素將擁有"浮動"效果，會脫離檔案流（可簡單理解為脫離上面說的白色底層)，進入漂浮狀態，即可以使用"二層空間"，可達到這樣漂浮效果的還有display、float等，本篇主要講position屬性（定位屬性），
position屬性用于為目標元素確定位置（確定漂浮態位置），其后可以跟從6種定位方法（其中position:static、position:relative較為特殊，其并不能將目標元素設定為漂浮狀態，即無法使目標元素脫離檔案流):
position:static
position:fixed
position:relative
position:absolute
position:inherit
position:sticky
接下來依次闡述
position:static
這是定位屬性的默認值，即『無定位』，如前所說，其目標元素將依然存在于正常檔案流中無法脫離，使用此種定位與不對目標元素施加定位將會是同種效果，既如此，對受static影響的元素設定right,bottom,top,left將無效，同樣的其他元素若相對受static影響的元素設定left,bottom,right,top也將無效，但是其對margin和padding將十分敏感，
position:fixed
這種定位方法被稱為“固定定位”，這種方法以瀏覽器邊框作為參照，注意這里的 參照 不受瀏覽器邊框尺寸變化影響，其以可視視窗作為參照物，改變瀏覽器可視視窗顯示尺寸后目標元素與瀏覽器邊框的距離不會改變，如此定位的元素也不受上下左右滾動條的影響，其會隨著底層和漂浮層移動，與其保持相對靜止，可以使目標元素脫離檔案流進入漂浮狀態，可以在后面添加left,right,top,bottom來對位置進行調整,瀏覽器的坐標系坐標原點在左上角，那里的坐標為（0，0)，并向右下延伸，可以依據此來對位置的像素進行粗略的調整（當然依然建議用截圖工具等測量）
<style>
.固定定位 {
position: fixed;
top: 10px;
left: 10px;
}
</style>
position:relative
這種定位方法被稱為“相對定位”，所謂“相對”既是相對定位前其在正常檔案流中的位置進行定位，可以簡單理解為“它相對于起點位置移動”，移動受relative影響的元素，這個元素原本所占的空間將依然在原處不改變，可以對其設定right,left,top,bottom進行目標元素位置的調整，另外值得一說的是受這種定位影響的元素可以被受position：absolute影響的元素選中為“包含塊”，并將其作為自身absolute定位屬性執行對自身的定位時的參照物，absolute選擇時通常會以就近原則選擇距離自己最近的受relative定位屬性影響的元素作為參照，這個特點便是俗稱的“子絕父相”（其實這種叫法并不嚴謹），在撰寫時可以使父元素使用相對定位，其內部的子元素使用絕對定位，這樣可以有效提高代碼的整潔度，在調控時也比較方便，避免調整子元素定位時找不到參照物的尷尬，也可以避免調整父元素導致的子元素錯位，
position：absolute
這種方法被稱為“絕對定位”，會選取目標元素的第一個已經 受到定位的父級元素 進行定位，前提是這個父級元素受到的定位不是position:static，跟從上方所說，這種定位也設定了“子絕父相”結構的組成部分——子元素部分 的位置，利用“受到absolute定位的元素會選取距離自己最近的受到定位的父元素進行定位”的特點，可以將受到absolute影響的元素放入受到relative定位的元素中作為其子元素，便于選取主元素以進行以后的調節，
<style>
.父級元素 {
position: relative;
top: 10px;
left: 10px;
}
.子級元素 {
position: absolute;
top: 10px;
left: 20px;
}
</style>
</head>
<body>
<div class="父級元素">
<span class="子級元素"></span>
</div>
</body>
position:inherit
這種方法嚴格來說或許并不能算是一種定位方法，因為inherit也可以作為其他屬性的值來使用，這里我只說它跟在position后時的情況，“inherit"這個單詞的意思為“繼承”，它在定位中的用途也一如它的漢意：受inherit影響的元素將會使用與其父元素相同的定位方式，注意是僅繼承定位方式，而不會以父元素作為參照來定位，所以依然可以對其設定right,bottom,left,top來進行定位，具體定位規則依據繼承來的不同的定位而不同，因為其與上級元素兩元素間有父子關系，所以被稱作 定位：繼承；
<style>
.父級元素 {
position: fixed;
top: 20px;
right: 30px;
}
.子級元素 {
position: inherit;
/*此處子級元素繼承父級元素，定位方式為fixed固定定位*/
top: 100px;
right: 150px;
}
</style>
position:sticky
這種方法被稱為“粘性定位”，受粘性定位的元素依據頁面滾動，在position:relative與position:fixed兩定位方法之間進行切換，在頁面的滾動不超出目標區域時，它的表現更加偏向position:relative; 而當頁面滾動超出目標區域時，它的表現更加偏向position:fixed它會將目標元素固定在目標位置，其定位表現是：在跨越特定閾值前為相對定位的定位方法，超過閾值之后為固定定位的定位方法，這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效，否則其行為與相對定位相同，這個特定閾值指的是 top, right, bottom,left 之一，也就是說必須指定top, right, bottom,left 四個閾值任意一個，才可使粘性定位生效，否則其行為僅能表現出相對定位的特點，
<style>
div.sticky {
position: -webkit-sticky; /*僅Safari需要加入此條*/
position: sticky;
top: 10px;
}
</style>
在對頁面上的元素進行設計時，最好是優先設定一個最大的（最好在中央）的父元素作為頁面中心，以其作為支點進行拓展延伸，可以減輕作業量，提升代碼整潔性，方便后期維護與除錯，
以上是我據本階段的學習得出的一些經驗與心得，如果對您起到幫助，在下十分榮幸；若是您發現了我的不足，懇請您的指點！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225862.html
標籤：其他