Why does Position: Relative causes previous floated sibling to be hidden

Question

I'm trying to understand why in the following codepen: https://codepen.io/benrhere/pen/XWRmVjr

setting position: relative on the second sibling affects (hides) the visibility of the first sibling (with Chrome 91.0.4472.124). You can see the problem in the first square div below, while the second square div does not have this problem. The only difference is that the second sibling is marked position: relative. It seems that this places the first sibling behind in stacking order, though I would have expected that applying position: relative only would affect its child elements' stacking order, not its siblings.

Ultimately, I'm going to move away from using float: right, but I'm just curious about this.

<html>
  <body>
    <div class="outer">
      <span class="floated">X</span>
            <div id="relative">Y</div>
    </div>
    <hr />
    <div class="outer">
      <span class="floated">X</span>
      <div id="notRelative">Y</div>
    </div>
  </body>
</html>

score -1 · Answer 1 · answered Jul 03 '21 at 22:36

-1

Default position of an element is static but when you give a position to the element other than static, its given a z-index. Thats why your span is below the stack index of the div.

answered Jul 03 '21 at 22:36

Furqan Saeed

22
3

Thanks for helping me out. I mistakenly thought that no Z index was equivelant to Z index 0. – BenjiFB Jul 03 '21 at 22:45
1

@BenjiFB sorry but this answer is wrong, z-index play no role here, please see the duplicate – Temani Afif Jul 03 '21 at 22:47
Is it suggested to delete this question in a circumstance like this? – BenjiFB Jul 03 '21 at 22:55
@BenjiFB no it's fine, there is no need to deleted it – Temani Afif Jul 03 '21 at 22:57

Why does Position: Relative causes previous floated sibling to be hidden

1 Answers1