如何利用絕對定位元素的默認頂部

只需注意position:absolute元素可以根據其「直接父級」的位置分配默認值top，無論是否爲relative。根據BoltClock，如何利用絕對定位元素的默認頂部

它仍然處於靜態位置，不會去任何地方。

下面是代碼：

.container { 
 
    height: 500px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.parent { 
 
    height: 200px; 
 
} 
 

 
.child { 
 
    height: 50px; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.blue { 
 
    background-color: #a6cee3; 
 
    border: 3px solid #1f78b4; 
 
} 
 

 
.green { 
 
    background-color: #b2df8a; 
 
    border: 3px solid #33a02c; 
 
} 
 

 
.red { 
 
    background-color: #fb9a99; 
 
    border: 3px solid #e31a1c; 
 
} 
 

 
.orange { 
 
    background-color: #fdbf6f; 
 
    border: 3px solid #ff7f00; 
 
} 
 

 
.violet { 
 
    background-color: #cab2d6; 
 
    border: 3px solid #6a3d9a; 
 
}

<div class="container blue"> 
 
    <div class="parent orange"></div> 
 
    <div class="parent violet"> 
 
    <div class="child red"></div> 
 
    </div> 
 
</div>

我想使絕對元件佔據所述容器的「剩餘空間」，即不包括第一個親本。我的想法是設置bottom:0，我期望的是top已經設置了某種程度，如果bottom也設置好了，它可以計算高度並擴展剩餘空間，但這並不奏效。

有沒有解決方案？

來源

2017-02-16 Guigui

如果top和bottom（或left和或全部四者）均爲自動，則絕對定位的框只能處於靜態位置。您不能在一側設置偏移量，並期望該框保持在靜態位置，因爲一旦您偏移了一個框它不再處於靜態位置。

來源

2017-02-17 04:25:45 BoltClock

爲什麼不將width和height設置爲絕對定位的子元素爲100%？

請參閱this您的小提琴的混音。

來源

2017-02-17 03:56:41 SpyderScript

我想讓它捨棄第一個父母，而不是覆蓋整個容器 – Guigui

@Guigui我更新了小提琴。這是你在找什麼？ – SpyderScript

我想要第一個父母（由您刪除）也發生 – Guigui

如何利用絕對定位元素的默認頂部

回答

相關問題