我有一個 Flex 元素和三個子元素。第二個孩子應該使用絕對位置與第一個孩子重疊，如下所示：
預期：
請注意，第二個子項目應位於第一個子項目的上方，而不是旁邊。
但是，在父級上設定 display: flex 似乎會將絕對元素的錨點或參考點移到 div 的開頭。實際結果是這樣的：
實際結果：
#將第二個子元素放在第一個或第三個元素中不是一個選項，因為它們有 overflow:scroll。在父級上使用任何其他 display 屬性也是如此，因為我的佈局依賴 display: flex。我知道其他帖子中已經建議了這些解決方案，但是，我還沒有找到解決這些限制問題的問題/答案。
在第二個孩子上使用 display:absolute 以外的其他內容也可以，例如負邊距，但我也無法使其工作。
如果有人知道這是否可能或有任何建議，我們將不勝感激。
要查看它的實際效果，這裡是我的程式碼，經過簡化以示範問題：
body{
color: white;
}
.wrapper{
display: flex;
}
.wrapper .a{
background-color: blue;
flex-grow: 1;
}
.wrapper .b{
position: absolute;
background-color: rgba(255, 0, 0, 0.5);
min-width: 40px;
}
.wrapper .c{
background-color: green;
min-width: 40px;
}
<div class="wrapper"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div>
P粉4269063692024-03-30 21:42:53
position:relative; 加入父級當一個元素被賦予position:absolute; 屬性時，它將透過relative、absolute 或fixed 定位來針對最近的父元素進行定位。如果沒有找到，它將針對 body 進行定位。在這種情況下，您可能需要將 position:relative; 新增至 .wrapper 元素，因為它是絕對定位的參考點。
根據定義，position:absolute; 元素將使用特定值集絕對定位。也就是說，距離頂部、右側、底部或/和左側邊緣有多遠。當您不提供任何值時，它只會粘在左上角，這就是這裡發生的情況。
position:absolute; 從正常內容流中取得一個元素。也就是說，它周圍的元素不會影響它的大小或位置；因此絕對是位置。為了實現圖中所示的效果，您需要指定 .c 元素的寬度，並使用相同的精確值從右邊緣定位 .b 元素。
請參閱下面的程式碼片段以供參考。
body{
color: white;
--width: 80px;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .a{
background-color: blue;
flex-grow: 1;
}
.wrapper .b{
position: absolute;
right: var(--width);
background-color: rgba(255, 0, 0, 0.5);
min-width: 40px;
}
.wrapper .c{
background-color: green;
width: var(--width);
}
ABC
P粉4516148342024-03-30 20:39:34
它出現在 div 的左側，因為它已從文件的流程中取出。事實上，它實際上是相對於視口而不是父包裝器定位的。若要使其定位到包裝器，請將 position:relative 設定為包裝器類別以建立 新包含區塊
#為了確保它與div 'a' 的末尾重疊，我使用了'right' 屬性將右手邊緣向左移動我設定的值自訂屬性，我已將其設定為該屬性和div 'c'。請參閱下面帶有註釋的範例。
.wrapper {
position: relative;
display: flex;
color: white;
--element-c-width: 40px; /* set this to both set the width of div 'c' and how far we move div 'b' leftwards */
}
.a {
background-color: blue;
flex-grow: 1;
}
.b {
position: absolute;
background-color: rgba(255, 0, 0, 0.5);
min-width: 40px;
right: var(--element-c-width); /* from the right hand side of the wrapper div, move it leftwards by this value */
}
.c {
background-color: green;
min-width: var(--element-c-width);
}
ABC