Why Setting Absolutely Positioned Element's Sibling as Position:Relative, Brings It Above The Former

Why setting absolutely positioned element's sibling as position:relative, brings it above the former?

.c3 is placed after the .circle if the DOM so following the tree order .c3 is after .circle.

If both are positioned and there is no z-index specified so the .c3 will be placed above the .circle whatever the value of position is:

1. With relative you will have this:

body {  width: 500px;  height: 500px;}
.c1 {  border: 1px solid blue;  width: 90%;  height: 90%;}
.c2 {  border: 1px solid green;  width: 90%;  height: 90%;}
.c3 {  border: 1px solid yellow;  width: 90%;  height: 90%;  position: relative;  background: blue;}
.c4 {  border: 1px solid red;  width: 90%;  height: 90%;}
.circle {  width: 100px;  height: 100px;  background: #f00;  position: absolute;  top: 200px;  left: 350px;  border-radius: 50%;}

<div class="c1">  <div class="c2">    <div class="circle">    </div>    <div class="c3">      <div class="c4">      </div>    </div>  </div></div>

Absolute positioned elements stack in opposite order (not as expected)

Stacking without the z-index property

As you can read here and here, the order of absolutely positioned elements is determined as follows:

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top)

In your case, the lowest element in the DOM is #child_2, that's why it appears on top.

Use z-index for manual positioning

With this property, you can define a manual order on elements. An element with a higher z-index will be displayed above another with lower z-index.

Here's your modified snippet:

#child_1,
#child_2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
}

#child_1 {
  z-index: 1;
}

#child_2 {
  z-index: 0;
}

#child_1 {
  background-color: green;
}

#child_2 {
  background-color: blue;
}

<div id="child_1">Green Child 1</div>
<div id="child_2">Blue Child 2</div>

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/

Css Sibling Absolute Positioning

Absolute positioning is dependent on the "current positioning context", which may include a parent element (if absolutely or relatively positioned) but will never include a sibling element.

Can you reorganize your dom so that you have a parent-child instead of siblings? If so, you could set the parent's position to relative or absolute and the child's position to absolute and the child's position would remain absolute in relation to the parent.

css pseudo elements and position absolute

See Stacking without the z-index property

When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

1. The background and borders of the root element
2. Descendant non-positioned blocks, in order of appearance in the HTML
3. Descendant positioned elements, in order of appearance in the HTML

---

In your example, .section-1 is relatively positioned so creates a new stacking context. .section-1::before is absolutely positioned, so will stack higher than any non-positioned elements in the same stacking context.

---

As soon as .navigation-bar and .header-content are relatively positioned, they will stack higher than .section-1::before (because they appear after .section-1::before in the HTML).

Issues when HTML body element is positioned 'relative'

1. Why does the body have CSS 'position:relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.

FC: That's not intended to fix a bug, but probably because one the (direct) children of the body element has position:absolute. Without the body having position:relative, that child would be positioned relative to the canvas (the browser inner window), rather than relative to the body element. See this tutorial ('Nested position:absolute') for the full story. There may have been IE bugs in that respect in the past, but as of IE8 IE behaves normally when it comes to this.

.

2. Why does 'margin-top' of 'only' the first element inside the body affect the position of every element?

FC: That is by design. Vertical margins affect the position of the subsequent sibling elements, a position:relative; top:20px does not. Again, see the mentioned tutorial for the full story.

.

3. Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.

FC: That would also be by design, but I'm not sure whether you are interpreting matters correctly. Can you post some code to demonstrate it? What I do know is that you should be careful with that method. See this Dottoro page for the full story, including alternatives.

Static positioned elements affect Absolute position of subsequent sibling elements

As this answer explains, if there is no (top, left, right, bottom) attributes the position: absolute element will be positioned by default as if it was part of the normal flow , this is helpful in case you want to maintain a position: absolute next to its sibling like a tool tip would, and manipulate it with margin property, let say:

margin-top:-40px;
margin-left:30px;

but if you set any (top,left,right, bottom), this will reset the default position and will be relative to the parent.

top:0

Stop absolutely positioned div from overlapping text

The solution for me was to create a second invisible div at the end of the content of unknown length, this invisible div is the same size as my absolutely positioned div, this ensures that there is always a space at the end of my content for the absolutely positioned div.

This answer was previously provided here:
Prevent absolutely-positioned elements from overlapping with text
However I didn't see (until now) how to apply it to a bottom right positioned div.

New structure is as follows:

<div id="outer" style="position: relative; width:450px; background-color:yellow;">
        <p>Content of unknown length</p>
        <div>Content of unknown height </div>
        <div id="spacer" style="width: 200px; height: 25px; margin-right:0px;"></div>
        <div style="position: absolute; right: 0; bottom: 0px; width: 200px; height: 20px; background-color:red;">bottom right</div>
    </div>

CSS Positioning Margin Trouble

Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.

Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.

Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.

Fixed Positioning
This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).

Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.

As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).

Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.

Hope this helps,
FuzzicalLogic

---

Related Topics