Why Using Absolute Position Causes The Div to Be on Top

Why using absolute position causes the div to be on top?

This is how the painting order works. As described here you have the following order:

For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block
equivalent:

In this step you will print the background and border of the h1 element

Otherwise: first for the element, then for all its in-flow, non-positioned, block-level descendants in tree order:

In this complex step you will print the content of the h1 element

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto'

And in this step you will print the positioned element #back; thus it will be on the top of h1 even if in the DOM it's before.

In other words, we first consider the in-flow elements then the postioned ones. Of course, changing z-index and/or other properties will affect the order because more steps can be consider.

For example adding a negative z-index to #back will trigger this rule:

Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then
tree order.

This will make the #back to be behind since h1 is printed later in the step (4) and (7).

Adding position:relative (or absolute or fixed) to h1 will make it a positioned element so like #back it will trigger the (8) and in this case the tree order will decide.

You may also notice that both background and content are printed in 2 different steps and this may also lead to some non intuitive painting behavior.

Why is position absolute rendered above position static?

Absolute:

This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow.

Here is example code:

#box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO from author Noah Stokes's document.

Clearly here is the Noah Stokes's DOCUMENT about css positioning

Why does margin-top affect the placement of an absolute div?

The simple factual explanation for why this happens is that the offset properties top, right, bottom and left actually respect the corresponding margin properties on each side. The spec says that these properties specify how far the margin edge of a box is offset from that particular side. The margin edge is defined in section 8.1.

So, when you set a top offset, the top margin is taken into account, and when you set a left offset, the left margin is taken into account.

If you had set the bottom offset instead of the top, you'll see that the bottom margin takes effect. If you then try to set a top margin, the top margin will no longer have any effect.

If you set both the top and bottom offsets, and both top and bottom margins, and a height, then the values become over-constrained and the bottom offset has no effect (and in turn neither does the bottom margin).

If you're looking to understand why the spec defines offsets this way, rather than why browsers behave this way, then it's primarily opinion-based, because all you'll get is conjecture. That said, Fabio's explanation is quite reasonable.

Why does position absolute make page to overflow?

I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.

The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.

To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.

I hope this takes away your confusion.

As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.

DIV changed its behaviour when position:absolute was added to it. Why?

That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..

If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;

Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.

I've explained here in detail, that how CSS Positioning Works

Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)

div below another absolute positioned div

Absolutely positioned elements will be removed from the flow of the document. So the footer moves up because container is not part of that flow. You would need to either use relative positioning on both, or absolute positioning for both and set their specific top and left values.

Alternatively you could set a top margin on footer that makes it drop enough so it is positioned below the container.

You also need to look at your css. There are several redundant properties that are possibly conflicting.

body
{
    font-family: arial;
    font-size: 17px;
    color: #a1a8af;
    background-color: #34495e;
}

.horni-panel
{
    border-top: 8px solid #34495e;
    position:absolute;
    top:0; left:0;
    height: 77px;  width: 100%;
    background-color: #ffffff;
}

.logo
{
    color: #34495e;
    font-family: Lato-Bold;
    font-size: 33px;
}

.minipozadi
{
    height: 100px;  width: 100%;
    position:absolute;
    background-color: blue;
    top: 85px;   left:0;
    z-index:1;
    text-align:center;
    font-size:30px;
}

.container
{
    padding: 20px;
    border-radius: 5px;
    z-index: 100;
    position:relative;
    margin: 0 auto;
    top: 120px;
    width: 70%;
    background-color: #fea;
}

.footer
{
    margin-top: 120px;
    width: 100%;
    height: 80px;
    background-color: green;
}

Here in this fiddle I removed some of the redundant css and used position:relative on the container div instead of absolute. The margin-top property on the footer needs to be greater than or equal to the top property on the container in order for it to stay below it.

Nested divs with absolute positioning causing overflow problems

You need to set the child's position to relative. Having absolute position means it is not concidering anything from the html. It is kind of like using the god mode. Having relative means it will concider its parent position. In this case, it is the div #body

I have adjusted the top and left values also because it was positioning the child 200px away from the content position after changing the position to relative.

Here is the working code. And please... use CSS instead of the attribute style=""
This way, you will clear your html code and it'll be easier to read, write and debug.

#parent {  overflow: hidden;  position: absolute;  left: 50px;  top: 50px;  border-width: 1px;  border-color: black;  border-style: solid;}
#header {  border-color: red;  border-width: 1px;  border-style: solid;}
#body {  width: 200px;  height: 170px;  border-width: 1px;  border-color: blue;  border-style: solid;  overflow: auto;  resize: both;}
#content {  border-width: 1px;  border-color: grey;  border-style: solid;}
#child {  position: relative;  top: 20px;  left: 30px;  width: 50px;  height: 50px;  border-width: 1px;  border-color: green;  border-style: solid;}

<div id="parent">  <div id="header">    <p>No scroll bars in header</p>  </div>  <div id="body">    <div id="content">      <p>Content</p>      <p>Content</p>      <p>Content</p>    </div>    <div id="child">      <p>Child</p>    </div>  </div></div>

Overlaying a div above another div element using absolute positioning in html

I believe this does what you're asking for:

.div1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}

.div2 {
  position: absolute;
  top: 0;
  left: 25%;
  bottom: 0;
  width: 75%;
  background-color: Coral;
}

.div3 {
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: Aquamarine;
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Why Using Absolute Position Causes The Div to Be on Top