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

Question

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

https://jsfiddle.net/dwxmb87L/1/

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

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

1. 更改 DOM 结构（HTML 必须保持原样）
2. 删除黄色元素的变换 CSS 声明
3. 尽可能少地改变其他元素的 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>