定位是一種更加高階的布局手段,通過定位我們可以將乙個元素擺放到頁面的任意位置
使用position屬性來設定定位
可選值：
static:預設值 元素是靜止的 沒有開啟定位
relative:開啟元素的相對定位
相對定位的特點：1.元素開啟相對定位以後 如果不設定偏移量(offset) 元素不會發生任何變化
通過偏移量設定元素的位置:
top:定位元素和定位位置上邊的距離
bottom:定位元素和定位位置下邊的距離
left:定位元素和定位位置左邊的距離
right:定位元素和定位位置右邊的距離
2.相對定位是參照與元素在文件流中的位置進行定位的
3.相對定位會提公升元素的層級
4.相對定位不會使元素脫離文件流
5.相對定位不會改變元素的性質 塊還是塊 行內還是行內
absolute:開啟元素的絕對定位
絕對定位特點:1.開啟絕對定位後 如果不設定偏移量 元素位置不會發生變化
2.開啟絕對定位後 元素會從文件流中脫離
3.絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
4.絕對定位會使元素提公升層級
5.絕對定位是相對於其包含塊進行定位的
包含塊(containing block):
正常情況下包含塊就是離當前元素最近的祖先塊元素
絕對定位的包含塊： 離它最近的開啟定位的祖先元素如果所有的祖先元素都沒有開啟定位
則相對於根元素進行定位
html(根元素，初始包含塊)
fixed:開啟元素的固定定位
固定定位也是一種絕對定位 所以固定定位的大部分特點和絕對定位一樣唯一不同的是 固定定位永遠參照於瀏覽器的視口(瀏覽器可視視窗)進行定位
固定定位的元素不會隨滾動條滾動上去 而是跟隨可視視窗的移動而移動
sticky:開啟元素的粘滯定位
粘滯定位的特點和相對定位基本一樣開啟定位後的等式：粘滯定位可以在元素到達某個位置時固定
left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含塊內容區的寬度
當開啟絕對定位後：垂直方向布局的等式也必須要滿足：水平方向的布局等式就要新增left和right兩個值
此時規則和之前一樣只是多新增了兩個值
當發生過渡約束時：如果九個值中沒有auto
則自動調整right值以使等式滿足如果有auto則自動調整auto的值以使等式滿足
可以設定auto的值：margin width left right
left和right的值預設是auto 則等式不滿足時，會自動調整這兩個值
top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含塊的高度
以下設定可以讓元素水平垂直都居中:
left: 0;right: 0;
top: 0;
bottom: 0;
對於開啟定位的元素，可以通過z-index屬性來指定元素的層級z-index需要乙個整數作為引數，值越大的元素的層級越高
元素層級越高的越優先顯示
如果元素層級一樣 則優先顯示靠下的
祖先元素層級再高，不會蓋住後代元素
CSS定位 元素層級 設定背景
一 定位 當開啟了元素的定位 position屬性值是乙個非static的值 時，二 相對定位 通常偏移量只需要使用兩個就可以對乙個元素進行定位，box2 box4 三 絕對定位 box2 s1四 固定定位 box2 五 元素的層級 z index.box2 box3 父元素的層級再高，也不會蓋過子...
CSS的五種定位方式
css中一共有五種定位 position static 預設值 position absolute 絕對定位 position relative 相對對定位 position fixed 固定定位 position sticky 粘性定位 其中，粘性定位是css3新增加的 相容性比較差 我們研究定位...
CSS定位網頁中的元素
relative相對定位 偏移設定 left right top bottom 值單位 px元素的規律 相對定位元素的規律 設定相對定位的盒子會相對它原來的位置通過指定偏移，到達新的位置。設定相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的盒子都沒有任何影響 設定相對定位的盒子原來的位置會被保留...