I recently ran into a problem that has got me puzzled. It may be just due to having tunnel vision after learning to code essentially by trial and error, but I have a div (supposed to be a single color shape background for some text) and even thought it is positioned in the right html section and (super)div, it just does not show up where I would expect it to, but rather jumps all the way to the top of the page.

Would you have any suggestions?

.third-section .problematic-div {
  position: absolute;
  left: -100px;
  top: 0%;
  background: lightgray;
  width: 500px;
  height: 200px;
  margin-left: 340px;
  z-index: -1;
}

<section class="first-section">
  ...
</section>
... ... ...
<section class="third-section">
  <div>
    <div class="problematic-div"></div>
  </div>
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You're probably missing position: relative; in one of the parents.
Thanks to this property the absoulte child components will be positioned relatively to it, so if you add position: relative; to the .third-section class, the .problematic-div will position itself on top of this section.