我有一個 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>
將
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); }它出現在 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); }