Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'position: absolute; bottom: 0' does not work when parent position is relative

Tags:

I have a css code.

Why the bottom: 0 does not work when the position: relative;?

If I give up position: relative;, the bottom works but float: left and float: right are not at width: 930px;.

sorry my bad english

#main {
  position: relative;
  width: 930px;
  padding: 10px;
  margin: 0 auto;
}

#left {
  position: absolute;
  left: 0;
}

#right {
  position: absolute;
  right: 0;
}

#bottom {
  position: absolute;
  bottom: 0;
}
<div id="main">
  <div id="left">
    Left
  </div>
  <div id="right">
    Right
  </div>
  <div id="bottom">
    Bottom
  </div>
</div>
like image 792
Thuong Nguyen Avatar asked May 24 '12 07:05

Thuong Nguyen


People also ask

Is absolute position relative to parent?

Absolute In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.

Why does position absolute not working?

If you are placing an element with absolute position, you need the base element to have a position value other than the default value. In your case if you change the position value of the parent div to 'relative' you can fix the issue.

Can an element have position absolute and relative?

If you position it as absolute , then you're positioning it relative to its closest ancestor which is fixed or relative ... Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.

Can position fixed be relative to parent?

fixed : the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.


2 Answers

That's because when you're setting position:relative on main, then position:absolute will be relative to the parent. And your #main div has no height, which causes the #bottom to not be at the bottom of the page.

like image 147
peirix Avatar answered Sep 21 '22 20:09

peirix


This is not the way to go, use float for such type of layout.

Coming back to your question,

bottom:0 is working fine but since your main doesnt have height, you are not seeing it,

Do this for #main,

    #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

Edit:

You can use,

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
    top:0;
}

#right {
 position:absolute;
 right:0;
 top:0;
}

#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

but I wont recommend this ( I said earlier this layout should not be handled by float) absolute does not account for position of other elements, so this code will break if #left has more height.

If I were you, I would have used this,

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    float:left;
}

#right {
  float:right;
}

#bottom {
    clear:both;
}
like image 20
Jashwant Avatar answered Sep 17 '22 20:09

Jashwant