CSS提取多个父级之外的元素

Question

在几个父级中有一个红圈元素（elementToExtract）,其结构应如下所示：

https://jsfidle.net/dwxmb87l/1/

null

#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;
}

html lang-html prettyprint-override"><div id="main">
  <div id="yellow">
    <div id="scroller">   
      <div id="someDiv">
        <div id="lightblue">    
          <div id="elementToExtract"></div>
        </div>
      </div>
    </div>  
  </div>
</div>

null

我如何提取它以显示在所有元素上（而不是由于溢出而被切成两半），而不：

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

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

Answer 1

更新：仅更改父级宽度

我试着尽可能少地改变。

null

#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>