positioning in css

8/12/2019 Positioning in CSS

1/4

What does positioning in absolute mode mean andwhich are the values that this property can assume?

As a predefined setting the value of the position property is set on static and represents the

normal position occupied by each element in the flow of the document.

The values that the position property can assume are the following:

static:as I already mentioned its the predefined value and represents the normal position

occupied by each element in the flow of the document;

absolute:indicates that the element should be positioned in absolute mode compared to the

first parent element which has a position other than static. The element is positioned

according to the coordinates provided through the top, left, right or bottom

properties.

relative:indicates that the element should be positioned in relative mode compared to its

own normal position. Even in this case it is positioned according to the coordinates

provided through the top, left, right or bottom properties.

inherit:indicates that the value of the position property should be inherited from the

parent element.

Recap: when we position an element, it is possible to specify with regard to which other

element of the page we are positioning it through the coordinates we provide.

http://www.yourinspirationweb.com/en/css-tips-how-to-use-absolute-position-property/

Why has exactly the browser window been taken as

reference?

We said that the element is positioned in absolute mode compared to the first parent element

which has a position other than static. Not having in our document any element with position

other than static the positioning occurs according to the HTML root element which coincides

with the browser area. Thats why in this case the positioning has been made in relation to the

browser window.

What if we wanted to position our box in relation to

another element?

If we wanted to position our box in relation to another elementrather than the browser

window enough assigning to the element (regarding which our box will be positioned) a

different positioning from static and adding the HTML markup of the box inside this element.
http://www.yourinspirationweb.com/en/css-tips-how-to-use-absolute-position-property/http://www.yourinspirationweb.com/en/css-tips-how-to-use-absolute-position-property/http://www.yourinspirationweb.com/en/css-tips-how-to-use-absolute-position-property/


2/4

If all parent div is static so current divstop/right/bottom/left values do not

affect position.

If the element having non static position and has child elements that are

absolutely positioned, they are now absolutely positioned within the context ofthis element.

To position an element "fixed" relative to a parent element, you

want position:absoluteon 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 childDivelement 50 pixels left and 20 pixels down relative to parentDiv'sposition.

Position absolute but relative to parentscroll down the page the element vanishes and doesn't stick to the top as with position:fixed.

Make #fatherhave position: relative, and the children have position: absolute, then

use topand bottomto position the children.

#fixedContainer

{

background-color:#ddd;

position: fixed;

width: 200px;

height: 100px;

left: 50%;

top: 0%;

margin-left: -100px; /*half the width*/

}
http://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parenthttp://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent


3/4

If the parent containing div did not exist or didn't have position: relative; the position:

absolute divs would appear at the top of the screen, taking their positions from the

main page container or body of the whole page.

The primary difference between static and relative position is that the relativevalue

accepts the box offset properties top, right, bottom, and leftand shifting theelement from its default position in any direction.

Relative positioned element may overlap, or underlap, other elements without moving

them from their default position.

.box-set{

background: #eaeaed;

}

.box

{

background: #2db34a;

height: 80px;

position: relative;

width: 80px;

}

.box-1

{

top: 20px;}

.box-2

{

left: 40px;

}

.box-3

{

bottom: -10px;

right: 20px;

}

Box 1

Box 2

Box 3

Box 4


4/4

Absolutely positioned elements accept box offset properties, however they are removed

from the normal flow of the document

Removing the element from the normal flow, elements are positioned directly in relationto their containing parent whom is relatively or absolutely positioned. Should a

relatively or absolutely positioned parent not be present, the absolutely positioned

element will be positioned in relation to the bodyof the page.

Using absolutely positioned elements and specifying both vertical and horizontal offset

properties will move the element with those property values in relation to its relatively

positioned parent. For example, an element with a topvalue of 50pxand a rightvalue

of 100pxwill position the element 50 pixels down from the top of its relatively

positioned parent and 100 pixels in from the right of its relatively positioned parent.

Relative positioning is always going to leave an empty space equal in size to

the element that was moved from its position

positioning in css

Documents