CSS extract element outside several parents

Question

There's a red circle element (elementToExtract) within several parents which should be structured as is:

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>

How can I extract it to be displayed over all elements (not cut in half due to the overflow) without:

1. changing DOM structure (HTML must stay intact)
2. removing transform CSS declaration of yellow element
3. altering CSS of other elements as little as possible (if possible, not at all!)

So basically, if possible, only by modifying CSS of elementToExtract. If absolutely undoable, some minor modifications of other elements, but look out for condition No 2

Answer 1

Updated: only changed width of parent

I have tried to change as less I can.

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