【CSS3】CSS中的定位
一、css定位
CSS position 屬性值：
- absolute：生成絕對定位的元素，脫離文檔流，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- relative：生成相對定位的元素，不脫離文檔流，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
- fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。
- static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- inherit：規定應該從父元素繼承 position 屬性的值。
1.static
HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到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的位置相對于其正常位置進行定位。其中的相對指的是相對于元素在默認流中的位置。
注意：
1.將元素position屬性設置為relative之后，再通過top,bottom,left,right屬性對其進行相對于原來位置的偏移；
2.元素偏移之后，他本來在默認文檔流中占據的位置仍然存在，其緊挨其后的元素的定位依據它本來的位置定位；
3.該元素偏移之后，可能存在覆蓋其他元素的情況，可以使用z-index屬性顯示層級有限級別。
<style>body{width:100%;height:1000px;background-color:#23edfa;}.page1{width:10%;height:10%;background-color:#65c34e;top:20px;left:20px;position:relative;}.page2{width:10%;height:10%;background-color:#FF4500;}.page3{width:10%;height:10%;background-color:#9A32CD;}</style>
顯示效果：
?
注意：如果在.page1中去掉position:relative，top與left作用就失效了
如上圖所示，綠色方塊的一部分在紅色方塊上面覆蓋，如果想通過代碼實現，使紅色方塊在上方，就要使用z-index屬性設置，即在.page1中設置z-index:-1。
顯示效果如下圖：
?3.absolute
生成絕對定位的元素，相對于static定位外的第一個父元素進行定位。
注意：
1.絕對定位的元素已經脫離了文檔流，普通流中其他元素的布局就像絕對元素不存在一樣；
2.絕對定位的元素的位置是相對于最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，它的位置就相對于body；
3.絕對定位的框可以覆蓋頁面的其他元素。
利用前端大神張鑫旭的一篇文章為開頭，來解讀absolute特性（實際上是height: 100%與 height: inherit區別）
盜用大神的解釋：
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后默認寬度自適應
代碼如下：
<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標簽默認寬度是100%顯示，第一幅圖片顯示結果正是如此，但是這時我們看到使用absolute后，則100%默認寬度就會變成自適應內部元素的寬度。
問題：出現塌陷
代碼如下：
<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>效果顯示：
以上代碼，當page2不設置top、left屬性值時，absolute對page2的位置不會受到影響
page1位置不變，page2的位置設置為
top:20%; ?? left:20%;
結果是設置absolute與不設置之后的效果一樣。
比如，在page1中添加代碼：（也就是代碼顯示的效果）
position:relative;而當我們去掉以上代碼時，顯示效果如下：
?
這時的top與left是以整個容器的寬度為標準(這里的寬高度指的是顯示的寬高度)，使用absoult定位的元素脫離文檔流后，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的， 舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素（注意，一定要是直系祖先才算哦~）
注意：relative和static方式在最外層時是以<body>標簽為定位原點的，而absoulte方式在無父級是position非static定位時是以<html>作為原點定位（仔細揣摩這句話，在實例中學習，就是以上圖展示的效果）?
附上代碼與圖，害怕忘記
<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默認為static時，顯示效果如下：
（3）關于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>顯示效果如下：
第二種情況：仔細看代碼的不同之處（定位發生改變）
.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; }顯示結果：
?4.fixed
?fixed定位，又稱為固定定位，它和absoult定位一樣，都脫離了文檔流，并且能夠根據top、right、left、bottom屬性進行定位，但不同的是fixed是根據窗口為原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移
z-index
?隨后簡單說一下z-index元素，z-index 屬性設置元素的堆疊順序
想通過z-index改變圖層的顯示順序，引用w3c中的實例，當設置z-index=-1時，鼠標這張圖片會至于文字底層
關于層疊順序還有很大的學問，現在這份經還沒有取到，等慢慢跟大神張鑫旭學習后，再來寫博客。
?
每天堅持寫技術博客，也是對指示的整理和在學習，希望每天下班后一個小時完成這個任務，現在盡管寫的很爛，但是我會不斷去學習的
轉載于:https://www.cnblogs.com/Horsonce/p/7472918.html
總結
以上是生活随笔為你收集整理的【CSS3】CSS中的定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ecshop_v2.7.3下载地址
- 下一篇： 服务器上装了安全狗后远程链接不上怎么解决