將一個相對元素放入絕對元素中會發生什麼？

絕對：完全忽略流量。相對：在正常流程的範圍內，但也可以移動。將一個相對元素放入絕對元素中會發生什麼？

這將顯示一個紅色方框內的綠色方塊預期。

<html> 
<head> 
    <title>Lets see what occurs</title> 
    <style> 
     #box_1 { 
      position: absolute; 
      top: 100px; 
      left: 100px; 
      right: 0px; 
      bottom: 0px; 
      background:red; 
     } 

     #box_2 { 
      position: absolute; 
      top: 100px; 
      bottom: 100px; 
      left: 40px; 
      right: 0px; 
      background:green; 
      } 

    </style> 
</head> 
<body> 
<div id="box_1"><div id="box_2"></div></div> 

</body> 
</html>

爲什麼這個不能做？

<html> 
<head> 
    <title>Lets see what occurs</title> 
    <style> 
     #box_1 { 
      position: absolute; 
      top: 100px; 
      left: 100px; 
      right: 0px; 
      bottom: 0px; 
      background:red; 
     } 

     #box_2 { 
      position: relative; 
      top: 100px; 
      bottom: 100px; 
      left: 40px; 
      right: 0px; 
      background:green; 
      } 

    </style> 
</head> 
<body> 
<div id="box_1"><div id="box_2"></div></div> 

</body> 
</html>

來源

2014-05-04 chopper draw lion4

指定所有「頂部，左側，底部，右側」僅適用於絕對位置。對於'relative'的位置，你可以指定'top' **或**'bottom'，'left' **或**'right'，並且元素的大小也應該被指定，否則它會是' 0'，你什麼都看不到。 –

方框2位於方框1的流程中，一旦它定位爲：相對，絕對或固定，它將（1）作爲參考。 –

相對位置：即使相對定位元素的含量被移動時，該元素的保留空間仍保存在正常流動。

絕對位置：隨着絕對定位，一個元件可以被放置在任何地方的網頁上。下面的標題放置在頁面左側100px和頁面頂部150px之間。

來源

2014-05-04 20:11:54 user2986372

absolute定位以父母/祖先爲參照，具有absolute或relative的定位。定位是指他自己，就是它，它在頁面流中的位置。因此，當您將absolutediv放在另一個absolutediv內時，左/上/等。引用是關於父母的邊界;當你像relative那樣定位兒童div時，它會在它應該是的地方參考他自己的邊界。

在這裏你可以讀好文章吧：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

來源

2014-05-04 20:13:34 pablopixel

問題不使用絕對定位的div內的相對定位，它是你的每條邊設定值（上，右，下，左），你的元素沒有定義的寬度。當您爲每條邊設置值時，它會嘗試將您的元素定位到每個值，這會產生意想不到的結果。

以下：

#box_1 { 
    position: absolute; 
    top: 100px; 
    bottom: 0; 
    left: 50px; 
    right: 0; 
}

應該更像：

#box_1 { 
    position: absolute; 
    top: 100px; 
    left: 50px; 
}

看這個小提琴看到的定位時，我刪除兩個不必要的位置值作爲預期工作，並添加寬度/高度： http://jsfiddle.net/S4fvs/9/

有時你想佔據整個窗口，所以設置top: 0,right: 0,bottom: 0和left: 0將導致塊級元素填充所有可用空間。這對於在常規內容之上創建新的上下文非常有用，例如對於可能會變長且滾動而無需滾動頁面的模式。

來源

2014-05-04 20:25:06 shadymoses

將一個相對元素放入絕對元素中會發生什麼？

回答

相關問題