CSS - 錨點移動顯示：flex 和位置：絕對

Question

我有一個 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>

Answer 1

將 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);
}

  
A
  
B
  
C

Answer 2

它出現在 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);
}

  
A
  
B
  
C