Postion absolute effecting padding of parent div

Question

I am trying to fix a button to the right edge of a div.

HTML:

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus"></button> 
</div>

CSS:

 #header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 20px;
   position: relative;
 }

 #header > button {
   position: absolute;
   top: 10px;
   right: 10px;
   color: #ffffff;
 }

After applying position: absolute:

You can see in the image above that original padding: 20px on the parent div is ignored.

While removing position: absolute:

Brings the original padding back but as you can see the button is then not to the right. Applying float: right has the same effect.

Can somebody help me fix this issues and more importantly explain whats causing this so I can better learn. Apologies if this is a very basic question.

Possible duplicate of [Absolute positioning ignoring padding of parent](https://stackoverflow.com/questions/17115344/absolute-positioning-ignoring-padding-of-parent) — Rushikumar, Dec 08 '17 at 14:44
@BianGoole There are no rules overwriting the padding in the code provided. Increasing the padding to `30px` _will_ increase the element height, suggesting the padding _is_ actually applied. `!important` is unlikely to have any effect. — agrm, Dec 08 '17 at 14:45

Nemanja Grabovac · Answer 1 · 2017-12-08T14:53:36.710

It is not ignored, absolute position will not take the padding of parent div. Just set the height of div and center the absolute element. The 20px padding is probabbly the entire height of parent div, if the child element is absolute. To clarify better: Your header is taking the height of 40px (20px padding top, 20px padding bottom), and your absolute button is not going to change the height, however if you don't set the position to absolute, the parent div will take the height of button + 40px of padding.

#header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 20px;
   position: relative;
 }

 #header > button {
   position: absolute;
   top: 10px;
   right: 10px;
   color: #ffffff;
 }

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus"></button> 
</div>

thank you for the explanation. So If wanted to increase the height of the parent element I can simply give it some height and then center the button according to the height? Did I understand this correctly? — Skywalker, Dec 08 '17 at 14:55

score 0 · Answer 2 · answered Dec 08 '17 at 14:41

Padding is not removed when you use absolute, but the height and width of your absolute element is not a part of your parent element anymore so therefore is loses height. Now if you want to change height of parent element you can either increase padding or give it height property.

 #header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 40px;
   position: relative;
 }

 #header > button {
   position: absolute;
   top: 30px;
   right: 10px;
   color: #ffffff;
 }

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus">x</button> 
</div>

score 0 · Answer 3 · answered Dec 08 '17 at 14:42

The reason is that, surprisingly, when a div has position: absolute its containing box is the parent's padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent's content box.

It only works, though, if you don't want the absolutely positioned div to have any additional padding of its own. I think the most general-purpose solutions using float with clear:both property

#header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 20px;
   position: relative;
 }

 #header > button {
   color: #ffffff;
   float:right;
 }

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus"></button>
  <div style="clear:both;">
  
  </div>
</div>

Postion absolute effecting padding of parent div

3 Answers3