Absolute Positioning Inside Absolute Position

Absolute positioning inside absolute position

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.

CSS: Absolute Element inside Absolute Element

Positioning an absolute element in relation to an absolute parent is "absolutely" the same as with a relative parent. In fact it's also the same if the parent were fixed.

Basically you will always position an absolute element in relation with the closest parent with NO position:static (which is the position of all elements by default).

While learning the example most common is absolute inside relative because while you are making some basic html, the first element you need to be absolute won't be positioned (probably) as you wish till you set relative to the parent and that won't change the position of this parent at all (from static to relative shoudn't make any difference on any element).

Probably your next question you may find willing to do is "why not all the elements are set to position:relative by default if it won't change the flow of the html at all and then you save time not adding position:relative to so many classes?". Yes, I coudn't understand it either till some day I needed an absolute element to be positioned in relation to NOT the closest parent. (for example, a position of an absolute submenu on relation to the main-menu ul but not to his direct parent which would be a li). Hope it's clear enough

Absolute positioning inside relative positioning?

A good example would be when you want to position something to the page or "relative" to a container/div.

Here is my Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/

This shows you that without the absolute div being inside of a "relative" div, the contents are aligned to the document body.

Notice that the green div (#box1), which has position: relative, the div inside (#inner1) it is aligned top/right INSIDE of #box1.

The blue box (#box2), which has the exact same HTML layout as the green box (#box1), does NOT include position: relative and notice that the div inside it (#inner2) is aligned to the top/right of the body

#box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    position: absolute;
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}

---

Here is a good article about it from Chris Coyier...

A page element with relative positioning gives you the control to
absolutely position children elements inside of it.

Source: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Why does the absolute positioning (position:absolute) cannot be placed inside a static parent container?

HTML elements are positioned static by default and static positioned elements are not affected by the top, bottom, left, and right properties so an element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page.

An absolute positioned element will position itself relative to the nearest positioned ancestor and the reason why it can't be relative to a static element parent is because otherwise absolute wouldn't be able to position with respect to anything other than the element's immediate pareny and it will have to apply calculations on every element instead of being able to take just shorter paths for static positioning elements.

The use of static positioned elements allows you to have arbitrary elements containers and this let's you have an element to be positionable relative to the element container you wish and not neccerly the intermediate parent.

CSS: absolute element inside an another absolute element

I have other solution. To fix iPad overscroll I wrote a small script, that fixes "scroll bouncing" / "overscroll"

https://github.com/aiboy/PerfectScrollFix

First of all, you don't need to change layout drastically and use absolute div's. Second, scroll is remains to be "native".

There is two problems thou:
1) For now only horizontal overscroll fix is supported
2) Your content ( that will be scrolled ) should be wrapped in a single element (wrapper)

You can test this script on iPad: http://jsbin.com/usomob/4

Source code of Example http://jsbin.com/usomob/4/edit

Absolute-positioned div scrolls inside absolute-positioned parent

I resolved by putting the element I wanted to scroll in an absolute-positioned div with overflow-y: scroll like so:

<div class='frame'>
  <div class='fix-me'></div>
  <div class='scroll-me'>
    <div class='long-content'></div>
  </div>
</div>

And styling like this:

.frame {
  background-color: blue;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 40px;
  overflow-y: hidden;
}

.scroll-me {
  background-color: orange;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.fix-me {
  position: absolute;
  z-index: 999;
  top: 40px;
  left: 40px;
  right: 40px;
  height: 56px;
  background-color: purple;
}

.long-content {
  width: 480px;
  background-color: yellow;
  height: 4000px;
  margin: 20px auto;
}

Pen here: https://codepen.io/dustinlocke/pen/vJMzpK

Z-index not behaving as expected with absolute positioning inside a fixed position element

As Pete's comment alludes to, it all comes down to stacking contexts. In this case, both .fixed elements create their own stacking contexts by virtue of being position: fixed;. The child of the first .fixed element creates a stacking context nested within its parent. Because it's nested inside an existing stacking context, it can never break out and stack any higher; its z-index is relative to its parent now.

The spec is actually somewhat helpful with the particulars: http://www.w3.org/TR/CSS2/visuren.html#z-index. You can see via the numbered list that child stacking contexts are painted dead last.

So in your case, your .fixed.first element would need to have a z-index of 2 for its child to stack atop .fixed.second.

How exactly does absolute position element behaves inside a static parent

You did not specify any of top, bottom, left or right for your absolutely positioned element, so it remains in the static position and doesn't go anywhere.

This happens regardless of whether your element is in another positioned element or not, and is completely by design; see my answer to this question for an explanation from the CSS2.1 spec.

I see in your fiddle you're trying to float your absolutely-positioned element; that will not work. Once you absolutely position an element, it cannot float:

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.

2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

Removing the position: absolute declaration alone will cause your element to reposition itself because it's now floating (it's actually being pushed down by #vertical-menu because there's not enough room), and once you remove the float: left declaration as well, it returns to its usual, static position.

Note also that when you absolutely position the element it is still taken out of the normal flow. If you tried to add content directly after <div id="content-container">...</div> you'll see that extra content appearing in the same spot instead of being pushed down.

---

Related Topics