CODEWITHSUNDEEP
htmlcsscss-position
user3159261
user3159261

Reputation: 13

How can I prevent elements moving due to absolute positioning?

Is there any solution available to stop elements that don't have a predefined height from moving up when an position absolute is used in another div?

this is what it looks like with the heights defined.

http://jsfiddle.net/77tsq/ : DEMO

.relative {
  position: relative;
  width: 600px;
  height: 400px;
  background:green;
}

.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 400px;
  height: 200px;
  background:blue;

}   

.test { position:relative;
  width: 600px;
height:200px;
float:left;
 clear:both;
 background:pink;
}

.clear { clear:both;}

HTML

<div class="relative">
<div class="absolute">

</div>
</div>
<div class="clear"></div>

<div class="test">
</div>

But when remove the heights it looks like this:

http://jsfiddle.net/77tsq/1/ - No heights

Upvotes: 1

Views: 6083

Answers (1)

Naeem Ul Wahhab
Naeem Ul Wahhab

Reputation: 2495

What I understand from your question is that you want your .test <div> to remain at the bottom of the .relative div.

But it not working because .relative div is parent div for .absolute div and when the parent div has no defined height property then it has height: auto css property by default. So it will have the height of its child div. But When you set position: absolute on a child div, the child div becomes independent of the parent div(no longer acts as child) so you are over-riding/breaking this default behavior. So the parent will no longer take care of its child div when the child has position: absolute and The child will be absolutely positioned over all other div's as independent div.

In your case the child div i.e .absolute div is placed over the other div's leaving the space below it empty for other divs so other div's can take the background place below it. As the parent .relative div is empty and it has no defined height property and it is no longer taking height of its children .absolute div so its height has become zero. Similarly .clear div is also empty and with no defined height property and thus has zero height. So as a result .test div takes the top place. So it will not work as long as you use position:absolute for .absolute div or you do not define height for .relative div. So we have to find an alternate solution for it.

So, if you want to make it work, you have two alternate solutions:

  • remove the css properties position:absolute;top:120px; from the child .absolute div and add css properties float:right; margin-top: 120px; to position it as you desired. check the result here:https://jsfiddle.net/22namfpn/1/ (The .relative div will still not be visible as long as it is empty or has no defined height property)

OR

  • set a custom height (height: 400px; or any suitable height) on the parent .relative div(as you already tried here:http://jsfiddle.net/77tsq/)

(Sorry as this answer is too late but I think it may guide/help you and others understand that why your code was not working as you desired).

Upvotes: 1

Related Questions