CSS Position Absolute with Respect to a Parent Element Acting as Relative

CSS Position Absolute With Respect to a Parent Element Acting as Relative

An absolute positioned element is positioned relative to the first parent element that has a position other than static. Since you have it inside a parent with relative it will be absolutely positioned relative to this parent.

You might be looking for fixed position, which is relative to browser window.

position absolute inside position relative gives element scope in parent

Absolutely positioned elements are placed in relation to the first positioned parent element. It is acting as it should.

Element with position absolute being placed relative to non-positioned parent element

Your understanding is actually right and it is working as expected, because you have a problem with your cascading in the css. The child is a <div>, hence having the style defined in the ` for the divs, which includes margins. Try adding this to the child:

 #absolute_relative .child {
   margin: 0;
   }

Note: it seemed a strange behaviour because both the child and parent had the same margin, thus it seemed like if the child was relative to the parent, but it wasn't.

Proof of concept: http://jsbin.com/eKOnOJO/1/.

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

---

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

---

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

Absolute Positioning Relative to the Parent

Absolute positioning is relative the closest parent (going up the parent chain) that has position set on it (like position: relative or position: absolute). If no parents in the parent chain have positioning set, then absolute positioning is relative to the document boundaries.

If you want position: absolute to be relative to the parent, the set position: relative on the parent. That will not change the position of the parent, but will scope the positioning of the children to be relative to the parent rather than relative to some higher level parent or document.

Why CSS position absolute behaves like relative to its child absolute elements

From MDN:

Absolute
Do not leave space for the element. Instead, position it at a
specified position relative to its closest positioned ancestor if any,
or otherwise relative to the initial containing block. Absolutely
positioned boxes can have margins, and they do not collapse with any
other margins.

---

From W3C:

In the absolute positioning model, a box is explicitly offset with respect to its containing block.

Which further leads to

Definition of containing block

If the element has position: absolute, the containing block is
established by the nearest ancestor with a position other than static.

So your absolute element will always be relative to the ancestors position unless it is a static positioned element.

Position element inside absolute parent with respect to grandparent

If supporting Internet Explorer 8 (and below) is not a concern, we could achieve that by pure CSS. Here is what you should know about CSS Transforms:

6 The Transform Rendering Model

For elements whose layout is governed by the CSS box model, any
value other than none for the transform results in the creation of
both a stacking context and a containing block. The object
acts as a containing block for fixed positioned descendants.

Hence, we add a transform with a value other than auto to the grandparent element, we will be able to use fixed positioning place the child element with the respect of the grandparent element which is creating the containing block.

EXAMPLE HERE

For instance:

.grandpa {
  position: relative;
  height: 500px;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.dad {
  position: absolute;
  width: 250px; height: 250px;
  bottom: 4em; left: 4em;
}

.son {
  position: fixed; /* This will be positioned with the respect to the grandpa
                      rather than the viewport */
  width: 100px; height: 100px;
  top: 2em; right: 2em;
}

Also, CSS Legendary Eric Mayer has written an article about this:

Un-fixing Fixed Elements with CSS Transforms

A transformed element creates a containing block even for descendants
that have been set to position: fixed. In other words, the containing
block for a fixed-position descendant of a transformed element is the
transformed element, not the viewport.

---

Related Topics