定位之絕對定位

1.定位之絕對定位

絕對定位的特點:

position: absolute

脫離文檔流

在不設置參照物時，參照物是body

人為設置參照物時，必須滿足兩個條件

這個參照物必須是絕對定位元素的父級元素

這個父級元素必須帶有定位屬性(相對、絕對、固定)

當絕對定位這個元素設置寬高為100%，繼承的是參照物的寬高

當絕對定位這個元素不設置四個方向值時，這個絕對定位元素的前面有其他平級(同級)元素，默認會排在這個平級元素的后面

在不設置寬高時，寬高是由內(nèi)容決定的

當絕對定位時，同時設置left/right/top/bottom值時，left和top值生效

參考物查找情況:

祖先元素沒有定位參考點

定位參照物先找最近的上一級祖先元素，上一級祖先元素沒有定位屬性，則繼續(xù)網(wǎng)上查找，直到找到body為止；

祖先元素有定位的參考點

定位參照物先找最近的上一級祖先元素，上一級祖先元素有定位屬性，則上一級有定位屬性的祖先元素就是參照物

實戰(zhàn): 始終水平垂直居中

絕對定位，上和左50%,再利用margin反向移動寬高的一半

絕對定位，上和左50%,再利用translate反向移動寬高的一半

絕對定位，四個方向偏移量為0，然后margin設置為auto

1.絕對定位，上和左50%,再利用margin反向移動寬高的一半

.black{width: 500px;height: 500px;background: black;position: relative}

.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;margin: -100px 0 0 -100px;}

2.絕對定位，上和左50%,再利用translate反向移動寬高的一半

.black{width: 500px;height: 500px;background: black;position: relative}

.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}

3.絕對定位，四個方向偏移量為0，然后margin設置為auto

.black{width: 500px;height: 500px;background: black;position: relative}

2.定位之相對定位

相對定位的特點:

position: relative

不脫離文檔流

相對定位的層級要比其他元素層級大(會蓋在其他元素之上)

當發(fā)生位置改變時，原來的位置還被占用著

參照物: 相對定位元素的定位是相對它自己的正常位置的定位

給絕對定位當參照物來用

當同時設置left和right值時，left值生效。同時設置top和bottom值時，top值生效

應用場景:

當自己改變位置時，又不影響其他元素，可以用相對定位

給絕對定位當參照物來用

配合z-index和top/bottom/left/right一起使用

3.定位元素的異同點

相同點:

1.都可以設置top/bottom/left/right 四個方位，如果同時設置top和bottom，不管值的大小，只聽top的，如果同時設置left 和 right，不管值的大小，只聽left的；

2.都可以設置z-index的屬性，用來改變層級，z-index的值越大，層級越靠上，反之越靠下；?'

注意: z-indx一定要和position一起使用，否則不起作用；

區(qū)別:

是否脫離正常文檔流

絕對定位和固定定位: 會脫離正常的文檔流(平行漂浮于元素之上: 重疊)；

絕對定位是會隨著滾動條的滾動而滾動

固定定位是固定不動，不會隨著滾動條的滾動而滾動

相對定位: 不會脫離正常的文檔流；

參照物

絕對定位 : 查找機制： 先找第一層的父元素，如果沒有則繼續(xù)往上查找，直接找到整個瀏覽器窗口為止，如果上級父元素有定位的參照物，則停止查找；

固定定位 ： 整個瀏覽器的窗口

相對定位 : 它自己原來本身的位置

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。