无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

在DIV框中相對的定位問題，這是我們在使用DIV+CSS中常常遇到的問題。如果我們沒有對position有很深的理解就常常會出現很多問題。那么首先我們來了解下position的幾個常用值：

例子：

<div class="case1">
  <div  class="case2">
  </div>
</div>

.case1{
  position: relative;
}

.case2{
  position: absolute;
}
只要你的基礎元素有position: relative。那它里面的元素用position: absolute就會基于外面的那個元素的位置。

如果兩個元素不是嵌套元素(nested element) 而是同等級別的，那需要使用javascript來完成。

relative和absolute的區(qū)別

1、relative。定位為relative的元素脫離正常的文本流中，但它在原來所占有的位置還存在，

黃色背景的層定位為relative，紅色邊框區(qū)域為其在正常流中的位置。在通過top、left對其定位后，從灰色背景層的位置可以看出其正常位置依然存在。

2、absolute。定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。如圖2：

可以看到，在將黃色背景層定位為absolute后，灰色背景層自動補上。

3、relative與absolute的主要區(qū)別：

首先，是上面已經提到過的在正常流中的位置存在與否。

其次，relative定位的層總是相對于其最近的父元素，無論其父元素是何種定位方式。如圖3：

圖中，紅色背景層為relative定位，其直接父元素綠色背景層為默認的static定位。紅色背景層的位置為相對綠色背景層top、left個20元素。而如果紅色背景層定位為absolute，則情形如圖4：

可以看到，紅色背景層依然定義top:20px；left:20px；但其相對的元素變?yōu)槎ㄎ环绞綖閍bsolute或relative的黃色背景層。因 此，對于absolute定位的層總是相對于其最近的定義為absolute或relative的父層，而這個父層并不一定是其直接父層。如果其父層中都 未定義absolute或relative，則其將相對body進行定位，如圖5：

除top、left、right、bottom定位外，margin屬性值的定義也符合上述規(guī)則。