CSS-Positions

Peeeeeeeeeeynk · July 17, 2014

Hi! I just got the hang of using CSS, I can mostly understand and how to use the other selectors except Position:relative and Position:absolute I wanna try to use it more in my projects for school and stuff but every time I try to use it I F*** up my site. Can anyone try to explain the easiest way to understand Position relative and absolute?

ToxicFire · July 17, 2014

Position: absolute is basically positioning the element relative to the 0,0 point of the parent element or browser viewport if the parent element doesn't have a position attribute assigned and generally ignores all other elements on the page removing it from the document flow

Position: relative is positioning the element relative to the position it would be in normally while preserving document flow while not directly altering it.

Use of position: absolute is generally considered bad practice in most cases and is often abused by people trying to do things the easy way.

position: relative you only really need to use it if your going to be moving things around a bit with other css properties.

read more:

http://www.cssreset.com/understanding-css-relative-and-absolute-positioning-explained/

Jimstah87 · July 17, 2014

You want to apply the position absolute property to the parent element. Once you do that you can then apply the position relative property to any child element within the parent element and use the top left bottom and right properties to position that child element with relative positioning applied to it within the parent element with position absolute position applied to it. So for example:

</div>

position the image 50px from the left and 50px from the top within the parent div element..

div {

position: absolute; once again absolute applied to the parent

}

img { and relative applied to the child element in which you want to position, and then just set the properties in this example 50px from top and 50px from the left

position: relative;

left: 50px;

top: 50px;

}

hope this helps : )

Drown · July 17, 2014

@Jimstah87

It's the other way around, relative to the parent and absolute to the child.

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

@Peeeeeeeeeeynk

You should avoid using absolute positionning unless you have to. It's the best way to screw up the look of your website in different resolutions (among others). One of the only use I found for absolute positionning is to place a button in the top-right (ex) of a window (parent with relative positionning). There are a few use case in the article I linked to before.

Jimstah87 · July 17, 2014

@Jimstah87

It's the other way around, relative to the parent and absolute to the child.

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

@Peeeeeeeeeeynk

You should avoid using absolute positionning unless you have to. It's the best way to screw up the look of your website in different resolutions (among others). One of the only use I found for absolute positionning is to place a button in the top-right (ex) of a window (parent with relative positionning). There are a few use case in the article I linked to before.

Yeah your right sorry about that, total brain fart lol thanks for picking up on that : )

Jimstah87 · July 17, 2014

@Jimstah87

It's the other way around, relative to the parent and absolute to the child.

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

@Peeeeeeeeeeynk

You should avoid using absolute positionning unless you have to. It's the best way to screw up the look of your website in different resolutions (among others). One of the only use I found for absolute positionning is to place a button in the top-right (ex) of a window (parent with relative positionning). There are a few use case in the article I linked to before.

That's a good point you make as well I can see that happening.