當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

【CSS3】CSS中的定位

發(fā)布時間：2025/7/14 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了【CSS3】CSS中的定位小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、css定位

CSS position 屬性值：

absolute：生成絕對定位的元素，脫離文檔流，相對于 static 定位以外的第一個父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
relative：生成相對定位的元素，不脫離文檔流，相對于其正常位置進(jìn)行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

1.static

HTML元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。靜態(tài)定位的元素不會受到top, bottom, left, right影響。

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><title>定位與浮動</title> </head> <body><style>body{width:100%;height:1000px;background-color:#23edfa;}.page1{width:10%;height:10%;background-color:#65c34e;}.page2{width:10%;height:10%;background-color:#FF4500;}.page3{width:10%;height:10%;background-color:#9A32CD;}</style><div class="page1"></div><div class="page2"></div><div class="page3"></div> </body> </html>

效果顯示：

2.relative

生成相對定位的元素，通過top,bottom,left,right的位置相對于其正常位置進(jìn)行定位。其中的相對指的是相對于元素在默認(rèn)流中的位置。

注意：

1.將元素position屬性設(shè)置為relative之后，再通過top,bottom,left,right屬性對其進(jìn)行相對于原來位置的偏移；

2.元素偏移之后，他本來在默認(rèn)文檔流中占據(jù)的位置仍然存在，其緊挨其后的元素的定位依據(jù)它本來的位置定位；

3.該元素偏移之后，可能存在覆蓋其他元素的情況，可以使用z-index屬性顯示層級有限級別。

顯示效果：

注意：如果在.page1中去掉position:relative，top與left作用就失效了

如上圖所示，綠色方塊的一部分在紅色方塊上面覆蓋，如果想通過代碼實(shí)現(xiàn)，使紅色方塊在上方，就要使用z-index屬性設(shè)置，即在.page1中設(shè)置z-index:-1。

顯示效果如下圖：

?3.absolute

生成絕對定位的元素，相對于static定位外的第一個父元素進(jìn)行定位。

注意：

1.絕對定位的元素已經(jīng)脫離了文檔流，普通流中其他元素的布局就像絕對元素不存在一樣；

2.絕對定位的元素的位置是相對于最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，它的位置就相對于body；

3.絕對定位的框可以覆蓋頁面的其他元素。

利用前端大神張鑫旭的一篇文章為開頭，來解讀absolute特性（實(shí)際上是height: 100%與 height: inherit區(qū)別）

盜用大神的解釋：

CSS代碼： .outer {display: inline-block;height: 200px; width: 40%;border: 5px solid #cd0000; } .height-100 {position: absolute;height: 100%; width: 200px;background-color: #beceeb; } .height-inherit {position: absolute;height: inherit; width: 200px;background-color: #beceeb; } HTML代碼： <div class="outer"><div class="height-100"></div></div> <div class="outer"><div class="height-inherit"></div></div>

顯示效果：

廢話不多說，來看看absolute的奇淫效果：

（1）使用absolute后默認(rèn)寬度自適應(yīng)

代碼如下：

<html lang="en"><head><meta charset="UTF-8"></head><body>body<style>.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }.abs { position:absolute; }</style><div class="div"><p>無absolute</p><img src="1.jpg"></div><div class="div abs"><p>absolute后</p><img src="1.jpg"></div><script type="text/javascript"> </script></body> </html>

?div標(biāo)簽?zāi)J(rèn)寬度是100%顯示，第一幅圖片顯示結(jié)果正是如此，但是這時我們看到使用absolute后，則100%默認(rèn)寬度就會變成自適應(yīng)內(nèi)部元素的寬度。

問題：出現(xiàn)塌陷

代碼如下：

<html lang="en"><head><meta charset="UTF-8"></head><body>body<style>.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; float:left; margin-left:20px}.abs { position:absolute; }</style><div class="div"><p>無absolute</p><img src="1.jpg"></div><div class="div"><p>absolute后</p><img class="abs" src="1.jpg"></div><script type="text/javascript"> </script></body> </html>

（2）父元素與子元素

<html lang="en"><head><meta charset="UTF-8"></head><body>body<style>body{background: #ADD8E6;padding: 0;margin: 0;width:100%;height:3000px;text-align:center;}.page1{width:100px;height:100px;background-color: #fDD8E6;text-align:center;position:relative;}.page2{width:50px;height:50px;background-color: #ccccc6;text-align:center;top:20%;left:20%; position:absolute;}.page3{width:100px;height:100px;background-color: #f223E6;text-align:center;top:30px;left:20px;</style><div class="page1">page1 <div class="page2">page2</div> </div><div class="page3">page3</div></body> </html>

效果顯示：

以上代碼，當(dāng)page2不設(shè)置top、left屬性值時，absolute對page2的位置不會受到影響

page1位置不變，page2的位置設(shè)置為

top:20%; ?? left:20%;

結(jié)果是設(shè)置absolute與不設(shè)置之后的效果一樣。

比如，在page1中添加代碼：（也就是代碼顯示的效果）

position:relative;

而當(dāng)我們?nèi)サ粢陨洗a時，顯示效果如下：

這時的top與left是以整個容器的寬度為標(biāo)準(zhǔn)(這里的寬高度指的是顯示的寬高度)，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而這個祖先類還必須是以postion非static方式定位的，舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素（注意，一定要是直系祖先才算哦~）

注意：relative和static方式在最外層時是以<body>標(biāo)簽為定位原點(diǎn)的，而absoulte方式在無父級是position非static定位時是以<html>作為原點(diǎn)定位（仔細(xì)揣摩這句話，在實(shí)例中學(xué)習(xí)，就是以上圖展示的效果）?

附上代碼與圖，害怕忘記

<html lang="en"><head><meta charset="UTF-8"></head><body><style>body{background: #ADD8E6;padding: 0;width:400px;height:300px;border:2px solid #e12a23;margin-left:50px;margin-top:50px;}.page0{width:150px;height:150px;border:3px solid #accea1;position:relative;}.page1{width:100px;height:100px;background-color: #fDD8E6;top:20px;left:20px;position:absolute;text-align:rigsht;}.page2{width:50px;height:50px;background-color:#ccccc6;top:20%;left:20%;text-align:center;position:relative;}</style><div class="page0"><div class="page1"> <div class="page2">page2</div> </div></div></body> </html>

如下圖所示：

如果page0默認(rèn)為static時，顯示效果如下：

（3）關(guān)于absolute和relative的三種情況

第一種：附上代碼：

<html lang="en"><head><meta charset="UTF-8"></head><body><style>body{background: #ADD8E6;padding: 0;width:400px;height:300px;border:2px solid #e12a23;margin-left:50px;margin-top:50px;}.page1{width:100px;height:100px;background-color: #fDD8E6;position:absolute;text-align:right;}.page2{width:50px;height:50px;background-color:#ccccc6;text-align:center;position:relative;}</style><div class="page1">page1 <div class="page2">page2</div> </div></body> </html>

顯示效果如下：

第二種情況：仔細(xì)看代碼的不同之處（定位發(fā)生改變）

.page1{width:100px;height:100px;background-color:#fDD8E6;top:40px;left:40px;position:relative;text-align:right;} .page2{width:50px;height:50px;background-color:#ccccc6;text-align:center;position:relative;}

顯示效果：

第三種情況：

.page1{width:100px;height:100px;background-color: #fDD8E6;top:40px;left:40px;position:relative;text-align:right; } .page2{width:50px;height:50px;background-color:#ccccc6;top:20%;left:20%;text-align:center;position:relative; }

顯示結(jié)果：

?4.fixed

?fixed定位，又稱為固定定位，它和absoult定位一樣，都脫離了文檔流，并且能夠根據(jù)top、right、left、bottom屬性進(jìn)行定位，但不同的是fixed是根據(jù)窗口為原點(diǎn)進(jìn)行偏移定位的，也就是說它不會根據(jù)滾動條的滾動而進(jìn)行偏移

z-index

?隨后簡單說一下z-index元素，z-index 屬性設(shè)置元素的堆疊順序

想通過z-index改變圖層的顯示順序，引用w3c中的實(shí)例，當(dāng)設(shè)置z-index=-1時，鼠標(biāo)這張圖片會至于文字底層

關(guān)于層疊順序還有很大的學(xué)問，現(xiàn)在這份經(jīng)還沒有取到，等慢慢跟大神張鑫旭學(xué)習(xí)后，再來寫博客。

每天堅持寫技術(shù)博客，也是對指示的整理和在學(xué)習(xí)，希望每天下班后一個小時完成這個任務(wù)，現(xiàn)在盡管寫的很爛，但是我會不斷去學(xué)習(xí)的

轉(zhuǎn)載于:https://www.cnblogs.com/Horsonce/p/7472918.html

總結(jié)

以上是生活随笔為你收集整理的【CSS3】CSS中的定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ecshop_v2.7.3下载地址
下一篇：服务器上装了安全狗后远程链接不上怎么解决