CSS之深刻探究Position

時間 2019-11-29

標籤 css 深刻探究 position 欄目 CSS 简体版

原文原文鏈接

這些天從新整理之前的代碼，想對其進行優化，卻出現了不少問題，其中一個就是Position，中間本身停下優化代碼的工做，特地停下來深刻研究了一下Position。如今來分享一下本身的體會吧！

首先咱們從定義來理解一下Position的幾個屬性吧

static 這個是容器默認值，沒有定位，出如今正常文檔流中。
absolute 這個是絕對定位，若是沒有設置TRBL，則相對於父容器的左上角，若是設置了TRBL則是相對於上一個設置了absolute，relative，fixed的祖輩容器的左上角（Ps：這一點你們要注意，雖然有點繞，可是不少講position的文章都沒提到這個），多是他的父容器，也多是父容器的父容器，以此類推，直到找到祖輩當中有一個設置了Postion爲absolute，relative，fixed的。若是找到頂層都沒有，那麼就是相對於文檔的根元素。
relative相對於其正常位置進行定位，可是離開這個位置後，仍是會佔據原來的空間，只是咱們看到的效果是移開了。
fixed 相對於瀏覽器的左上角，位置固定不變。
inherit 繼承父元素的position。

以上是根據我本身所理解的和看的一些教程來定義的幾個屬性，而後咱們來看一下Demo吧

這裏的demo我只是舉一下absolute的例子，由於fixed和relative都比較好理解，就沒必要多說。css

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
div{border:2px red solid;}
body{background-color: #999;}
#box1{
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: #444;
  margin-left: 100px;
  margin-top: 100px;
}
#box2{
  width: 300px;
  height: 300px;  
  background-color: #777;
  position: absolute;
  
}
</style>
</head>

<body>
<div id="box1"> 
    <div id="box2">
        
    </div>  
</div>
</body>
</html>

效果
html

這個就是未設置TRBL時效果。接着咱們設置一下TBRL來看看，更改一下代碼瀏覽器

#box2{
  width: 300px;
  height: 300px;  
  background-color: #777;
  position: absolute;
  top:50px;
  left:50px;
}

效果：
佈局

這個box2就是相對於根元素來定位的。由於它的祖輩容器中沒有一個設置了postion的。接着咱們在box1中添加position: relative;post

#box1{
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: #444;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
}

效果：

以上三種狀況就簡明解釋了absolute的一些特性。優化

接着我要說的一點就是：當一個元素被定位absolute以後，那麼這個元素就算是上天了，此話怎講，就是這個元素咱們只是看得見，可是不存在於文檔流中，它後面的其餘元素會和它重疊，被他遮住。這一點十分重要。這也是我本身進行代碼重構的時候遇到的問題。好比這樣，咱們把以前的代碼後面添加一段文字。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
div{border:2px red solid;}
body{background-color: #999;}
#box1{
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: #444;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
}
#box2{
      width: 300px;
      height: 300px;  
      background-color: #777;
      position: absolute;
      top:50px;
      left:50px;
    }
</style>
</head>

<body>
<div id="box1"> 
    <div id="box2">
        
    </div>  
    <p>這是一段文字，若是看不見我就說明我被遮住了，或者被遮住一部分。</p>
</div>
</body>
</html>