Home/ Questions/Q 1035447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T14:32:37+00:00

Why does an html element (such as a div) that has been styled with

  • 0

Why does an html element (such as a div) that has been styled with 

position: relative;
top: -50px;

Still force the parent element to have the same size as if the relatively positioned element were not shifted?

Let me provide an example (live example found at http://jsbin.com/ohebi4/2/edit)

<html>
<head>
  <style>
      article, aside, figure, footer, header, hgroup,
      menu, nav, section { display: block; }

      .parent{ position: relative; background-color: #000000; float: left; border: 1px solid red; }
      .child1{ float: left; background-color: #888888;}
      .child2{ float: left; background-color: #CCCCCC; }

      .subchild{ position: relative; top: -45px; height: 30px; border: 1px solid green;}
      .subchild2{ height: 30px; border: 1px solid green;}
    </style>
</head>
<body>

  <div style='clear: both; height: 50px;'></div>
  <div class='parent'>
    <div class='child1'>regular content</div>
    <div class='child2'>content of child 2</div>
  </div>
  <div>Sample A</div>

  <div style='clear: both; height: 50px;'></div>
  <div class='parent'>
    <div class='child1'><div class='subchild2'>subchild</div></div>
    <div class='child2'>content of child 2</div>
  </div>
  <div>Sample B</div>

  <div style='clear: both; height: 50px;'></div>
  <div class='parent'>
    <div class='child1'><div class='subchild'>subchild</div></div>
    <div class='child2'>content of child 2</div>
  </div>
  <div>Sample C</div>  

  <div style='clear: both; height: 50px;'></div>
  <div class='parent'>
    <div class='child1'><span>child 1</span><div class='subchild'>subchild</div></div>
    <div class='child2'>content of child 2</div>
  </div>
  <div>Sample D</div>
</body>
</html>

The above markup creates a page that looks like this:

alt text

Sample A: Just a couple of divs inside a parent div, with normal content and flow

Sample B: Added a subchild div, with a height of 30px. As expected, it changes the height of the parent, thus revealing the black background beneath “content of child b”

Sample C: The subchild is repositions with position:relative. Note how even though this element is shifted above everything, it still contributes to the height of the parent, thus keeping the black background revealed

Sample D: Problem in sample C excacerbated by added a span before subchild div.

The behavior in A and B I understand. What I do not understand is the behavior in C and D. If the element that makes the parent taller is repositioned such that it isn’t in that space anymore … why does it still make the parent taller?

I expect (incorrectly, obviously), that example C (and D) would look identical to A, with the addition of the green “subchild” box above it.

Can anyone explain to me why this is, and how to not have a relatively placed element affect the dimensions of the parent like this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll have to set:

    position:absolute;

    to have the .subchild not be put into the normal flow. As you already have the .parent set to position:relative;, you don’t need to do anything else.

    According to this, position:relative; is still calculated into normal flow. position:absolute; will make it NOT calculated into normal flow and will use the top-left of the first parent tag with position:relative; as the origin. (If no parents are relative, then it assumes the viewport, and will act like it is fixed.) position:fixed; always uses the viewport top-left as the origin.

    • 0