How to make an element's position absolute in page, despite an ancestor having absolute position


Tags: html,css

Problem :

Consider this:

<div class="normal">
  <div class="abs1">
    ...
    <div class="abs2">
    </div>
  </div>
</div>

with this CSS

.abs1 {
  position: absolute;
}
.abs2 {
  position: absolute;
}

So, the position of the .abs2 div is relative to its .abs1 ancestor. What if I need it to be relative to the document, or to another ancestor higher up in the hierarchy? Is that possible? How?



Solution :

Great answer here:

Because position: absolute resets the relative position for children just as position: relative does.

There is no way around this - if you want the third div to be absolutely positioned relatively to the first one, you will have to make it a child of the first one.

Source: http://stackoverflow.com/a/5928069/5814976


    CSS Howto..

    How do I use the alignment of one class and the font of another?

    Css how to replace block after click button

    How to set link on image using maplink in responsive theme?

    How to change css rules of external stylesheet [duplicate]

    css - How to remove padding next to adjacent links?

    How to set the padding of QTableView cells through CSS?

    How to have 3 sections in a row

    How to hide text using CSS?

    how the rises up and down button is made?

    How to validate HTML with RSS?

    CSS and HTML: How to create an Expanding DIV On Click?

    css how to align absolute positioned child element to the right of fluid width parent

    How i can set the height of black overlay in css that all other things goes hidden?

    how to use css inheritance for button colors

    How do I get IE7 to print this properly with columns hidden by CSS?
    What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave...
    Read more

    How to show all siblings on :hover in pure CSS

    How to convert shorthand CSS to longhand?

    small space keeps showing to right side of my website w

    How do three.js transforms and CSS3 3D-transforms correspond?

    How do I make footer take 100% of the width of the webpage?

    How do I minify CSS and Javascript? [duplicate]

    How to pull images out of WordPress content?

    how to create this css?

    CSS: How do I assign one class to multiple elements?

    How to position two divs horizontally within another div

    How to create a CSS box link without using display: block

    Jquery: How to check if the element has certain css class/style

    How to set my Django form on the center of the page

    How to draw a guitar string using css?

    How to create new lines with less space HTML/CSS