CSS 中的position屬性實(shí)例詳解

CSS 的position屬性
就像photoshop中的圖層功能會(huì)把一整張圖片分層一個(gè)個(gè)圖層一樣,網(wǎng)頁(yè)布局中的每一個(gè)元素也可以看成是一個(gè)個(gè)類似圖層的層模型。層布局模型就是把網(wǎng)頁(yè)中的每一個(gè)元素看成是一層一層的,然后通過(guò)定位屬性position對(duì)元素進(jìn)行定位擺放,最終實(shí)現(xiàn)網(wǎng)頁(yè)的布局。
定位屬性position有4個(gè)值,分別是靜態(tài)定位(static)、相對(duì)定位(relative)、絕對(duì)定位(absolute)和固定定位(fixed)。默認(rèn)就是static。所以我們略過(guò)。
元素設(shè)置了定位以后,還要依靠4個(gè)方位屬性來(lái)進(jìn)行定位擺放。
方位屬性:
/* top:讓元素相對(duì)于指定目標(biāo)的頂部偏移指定的距離。 例如: top:10px; 表示距離頂部10像素 right:讓元素相對(duì)于指定目標(biāo)的右邊偏移指定的距離。 例如: right:10px; 表示距離頂部10像素 bottom:讓元素相對(duì)于指定目標(biāo)的底部偏移指定的距離。 例如: bottom:10px; 表示距離頂部10像素 left:讓元素相對(duì)于指定目標(biāo)的左邊偏移指定的距離。 例如: left:10px; 表示距離頂部10像素 */
相對(duì)定位(relative)
相對(duì)定位就是在正常文檔流中,元素相對(duì)于自身位置使用left、right、top、bottom屬性進(jìn)行定位偏移。
.c1{ width: 200px; height: 200px; background-color: indianred; } .c2{ width: 200px; height: 200px; background-color: orange; position: relative; left: 200px; top: 200px; } .c3{ width: 200px; height: 200px; background-color: lightblue; }
絕對(duì)定位(absolute)
絕對(duì)定位就是將元素脫離文檔流,然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父級(jí)元素進(jìn)行絕對(duì)定位,如果不存在這樣的父級(jí)元素,則默認(rèn)是相對(duì)于body元素進(jìn)行絕對(duì)定位。
輪播圖案例:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf8"> <style> *{ margin: 0; padding: 0; } .lunbo{ width: 590px; height: 470px; border: 1px solid rebeccapurple; margin: 100px auto; position: relative; } .lunbo ul{ list-style: none; } .lunbo .img li{ position: absolute; top: 0; left: 0; } .lunbo .btn li{ font-size: 25px; width: 40px; height: 40px; background-color: gray; text-align: center; line-height: 40px; border-bottom-right-radius: 50%; border-top-right-radius: 50%; color: white; position: absolute; top: 50%; margin-top: -20px; } .lunbo .left_btn{ left: 0; } .lunbo .right_btn{ right: 0; } </style> </head> <body> <div class="lunbo"> <ul class="img"> <li><a href=""><img src="imgs/1.jpg" alt=""></a></li> <li><a href=""><img src="imgs/2.jpg" alt=""></a></li> <li><a href=""><img src="imgs/3.jpg" alt=""></a></li> <li><a href=""><img src="imgs/4.jpg" alt=""></a></li> <li><a href=""><img src="imgs/5.jpg" alt=""></a></li> </ul> <ul class="btn"> <li class="left_btn"> < </li> <li class="right_btn"> > </li> </ul> </div> </body> </html>
固定定位(fixed)
固定定位與絕對(duì)定位有點(diǎn)相似,但是固定定位是使用left、right、top、bottom屬性相對(duì)于整個(gè)瀏覽器的窗口進(jìn)行定位,而不再相對(duì)于某個(gè)HTML頁(yè)面元素了,所以當(dāng)元素使用了固定定位以后,就算頁(yè)面的滾動(dòng)條滾動(dòng)了,固定定位的元素也不會(huì)變化位置。也就是說(shuō)固定定位是相對(duì)于窗口的定位,不受文檔流的影響了。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf8"> <style> body{ margin: 0; } .c1{ width: 100%; height: 2000px; background-color: lightgray; } .c2{ width: 200px; height: 60px; background-color: yellowgreen; text-align: center; line-height: 60px; position: fixed; right: 20px; bottom: 20px; } </style> </head> <body> <div class="c1"></div> <div class="c2">返回頂部</div> </body> </html>
到此這篇關(guān)于CSS 的position屬性的文章就介紹到這了,更多相關(guān)CSS position屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了CSS中的 position屬性sticky的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-12
css position屬性為absolute時(shí)其百分值的計(jì)算
這篇文章主要介紹了css position屬性為absolute時(shí)其百分值的計(jì)算,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小2019-08-06- 這篇文章主要介紹了詳解CSS中position屬性介紹(新增sticky) 的相關(guān)資料,position的含義是指定位類型,取值類型可以有:static、relative、absolute、fixed、inherit和stic2018-12-17
- 這篇文章主要介紹了css中的position屬性值的探究(小結(jié))的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-25
css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)
下面小編就為大家?guī)?lái)一篇css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-08淺談CSS中display/float/position屬性值的相互影響
下面小編就為大家?guī)?lái)一篇淺談CSS中display/float/position屬性值的相互影響。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-17- 這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點(diǎn)講解了相對(duì)定位和絕對(duì)定位在頁(yè)面布局中的作用,需要的朋友可以參考下2016-04-28
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對(duì)比,需要的朋友可以參考下2015-11-06
CSS樣式position屬性的一個(gè)小實(shí)例:z方向三層布局分析
使用CSS樣式中的position屬性實(shí)現(xiàn)z方向三層布局效果,本文甚是疑惑,于是乎搜集整理一番,曬出代碼和大家分享一下2012-12-07