CSS 提取几个父元素之外的元素

Question

几个父级中有一个红色圆圈元素 (elementToExtract)，其结构应为：

#main {
  top: 17px;
  left: 32px;
  position: absolute;
  overflow: hidden;
}
#yellow {
  display: inline-block;
  transform: translate(0px, 0px) translateZ(0px);
  position: relative;
  width: 240px;  
  background: yellow;
}
#scroller {
}
#someDiv {  
}
#lightblue {
  position: relative;
  width: 220px;
  height: 200px;   
  margin: 10px;
  background: lightblue;
  overflow: hidden;    
}
#elementToExtract {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: fixed;
  top: 0;
  right: -15px;
  background: red;
}

<div id="main">
  <div id="yellow">
    <div id="scroller">   
      <div id="someDiv">
        <div id="lightblue">    
          <div id="elementToExtract"></div>
        </div>
      </div>
    </div>  
  </div>
</div>

我如何提取它以显示在所有元素上（由于溢出而不是减半）没有:

改变 DOM 结构（HTML 必须保持不变）
删除黄色元素的变换CSS声明
尽可能少地改变 CSS 其他元素（如果可能，根本不要改变！）

所以基本上，如果可能的话，只能通过修改 elementToExtract 的 CSS。如果绝对不可撤销，对其他元素进行一些小的修改，但要注意条件 2

Answer 1

已更新：仅更改了父项的宽度

我已经尽力改变了。

#main {
  top: 17px;
  left: 32px;
  position: absolute;
  overflow: hidden;
  width: 300px; /* added this line only */
}

#yellow {
  display: inline-block;
  transform: translate(0px, 0px) translateZ(0px);
  position: relative;
  width: 240px;
  background: yellow;
}

#scroller {}

#someDiv {}

#lightblue {
  position: relative;
  width: 220px;
  height: 200px;
  margin: 10px;
  background: lightblue;
  overflow: hidden;
}

#elementToExtract {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: fixed;
  top: 0;
  right: -15px;
  background: red;
}

<div id="main">
  <div id="yellow">
    <div id="scroller">
      <div id="someDiv">
        <div id="lightblue">
          <div id="elementToExtract"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS 提取几个父元素之外的元素

CSS extract element outside several parents

html

css

css-position

css-transforms