CODEWITHSUNDEEP
csspositioningabsolute
Phil
Phil

Reputation: 1674

Absolute positioning

I'm trying to understand the basics of positioning, and I came across this example on the internet that displays specific properties. Essentially, they created two boxes with CSS:

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

Because absolute positioning places the container in relation to its first parent element, shouldn't the second box be placed at the top of the browser, and then left 100 pixels? With this definition of absolute positioning, shouldn't the two boxes overlap? Instead, the second box ends up below the first box. I thought that absolute positioning removes an object from the normal flow of a page? Can anyone explain this to me?

Here's what I'm talking about: http://jsfiddle.net/WScGM/

Upvotes: 0

Views: 190

Answers (3)

Krupal Shah
Krupal Shah

Reputation: 9187

Absolute positioning is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.

You can use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning.

If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page.

An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning.

Now comes your question: shouldn't the second box be placed at the top of the browser, and then left 100 pixels? With this definition of absolute positioning, shouldn't the two boxes overlap?

yes of course, by the definition of absolute positioning, the two boxes should overlap, if both are in absolute positioning.

This is because by default one of them is in in static positioning.

Now I have made both in absolute position as following:

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

and so, now they are overlapping.See here:

FIDDLE

Upvotes: 1

SVSchmidt
SVSchmidt

Reputation: 6517

W3C says:

Absolutely positioned boxes are taken out of the normal flow.

and

The box's position ... is specified with the 'top', 'right', 'bottom', and 'left' properties

In your example, you haven't defined a value for "top" or "bottom" (the vertical position). The initial value of top/left/right/bottom is "auto". So I believe this is the reason the element keeps its vertical position. The actually calculated styling would look like:

position:absolute;
left:100px;
right:auto;
top:auto;
bottom:auto;

That means it behaves like if it was in the normal flow but it's 100px more right. But if you put a third box without absolute positioning in the document, the absolute one will overlap it.

To position it 100px from the left upper edge, add

top:0;

to your CSS.

Upvotes: 3

Marvin
Marvin

Reputation: 157

You need to add "top:0" for the second box for overlapping.

Upvotes: 0

Related Questions