I can't seem to get a div to absolutely position within its parent using the twitter bootstrap framework. I have a series of rows that follow a scheme as follows
<div id='wrapper'>
<div class='row-fluid'>
<div class='span2'>some content here</div>
<div class='span9'>other content to the side of the first div</div>
<div class='timestamp'>123456 this should align to the bottom right of wrapper</div>
</div>
</div>
css
.timestamp{
position:absolute;
bottom:0px;
right:0px;
}
But the timestamp div always positions itself to the absolute of the body of the whole dom document ignoring any intermediate divs. Any ideas what is causing this?
The absolute positioning is best if you need something the be placed at an exact coordinate. The relative positioning will take where the element already is, and add the coordinates to it.
Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
Your css should include
#wrapper {
position: relative;
}
The default positioning is static.
check out this article: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With