translateX' applies to children with 'position: sticky'

Question

I'm working on a calendar component and would like to see the names of my meetings even if the meeting's start is scrolled out of view. Hence, I applied position: sticky to the names. In a very simplified way, this is what I want to have:

#a {
  width: 500px;
  height: 200px;
  background: #ff0000;
  overflow: scroll;
  margin: 25px;
  position: relative;
}

#b {
  width: 1000px;
  background: #00ff00
}

#c {
  width: 300px;
  background: #0000ff;
  margin-left:100px;
}

#d {
  position: sticky;
  left: 0;
  display: inline-block;
}

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d">
        <div id="e">
          Hello World
        </div>
      </div>
    </div>
  </div>
</div>

The <div id="c">, however, is not horizontally aligned with margin-left as in the above example but with transform: translateX(100px). This has various reasons, but mainly because I use a library for making the meetings drag&droppable that modifies the translateX value. The issue I'm having is that even though the relative element for <div id="d"> should be <div id="a">, the translateX of <div id="c"> still seems to get applied. I was under the impression that position: sticky will similarly to position: absolute remove the element from the document flow.

Why is transform: translateX(100px) of the parent still applied regardless? (The same thing is also reproducible using position: absolute btw)

And any ideas how I can still get the "Hello World" to stick to the left side of the container once its parent gets scrolled out of view?

#a {
  width: 500px;
  height: 200px;
  background: #ff0000;
  overflow: scroll;
  margin: 25px;
  position: relative;
}

#b {
  width: 1000px;
  background: #00ff00
}

#c {
  width: 300px;
  background: #0000ff;
  transform: translateX(100px);
}

#d {
  position: sticky;
  left: 0;
  display: inline-block;
}

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d">
        <div id="e">
          Hello World
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

click to see the picture

#a {
  width: 500px;
  height: 200px;
  background: #ff0000;
  overflow: scroll;
  margin: 25px;
  position: relative;
}

#b {
  width: 1000px;
  background: #00ff00
}

#c {
  width: 300px;
  background: #0000ff;
  transform: translateX(100px);
  position: sticky;
  left: -100px;
}

#d {
  position: sticky;
  left: 0;
  display: inline-block;
}
#e{
  position: absolute;
  left: 0;
  top: 0;

 <div id="a">
  <div id="b">
    <div id="c">
        <div id="e">
          Hello World
          </div>
      <div id="d">
      </div>
    </div>
  </div>
</div>

Check the picture,Maybe you want this kind of view?