Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Pointsposition absolute and relative
Can somebody explain to me, when to use position absolute and when to use relative, and what is the difference between them
5 Answers
Alexander La Bianca
15,960 PointsNot a css expert, but I here is something that may help you.
<div id="outerbox">
<div id="innerbox">
</div>
</div>
#outerbox {
width: 100%;
height: 300px;
position: relative;
background: blue;
}
#innerbox {
width: 10%;
height: 30px;
position: absolute;
top: 0;
left: 0;
background: red;
}
The pure html is just an outer div that contains an inner div. But with adding postioning relative and absolute to them I can do some powerful stuff. You want to add 'relative' to the parent container that should contain absolute positioned elements. An absolute positioned element can be freely moved around in the relative element. For example: I have a top of 0 and left of 0 which would place the innerbox at the top left corner of the outerbox. I can change this to top 50 and left 50 which will put the innerbox in about the center of the outerbox.
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 PointsThank you for your answers, i'm really thankful, but there is something what I dont understand, because my english skills is not so good to understand, i picked sentences from the video, and maybe you can give me more detailed examples to understand, what teacher wanned to say:
- An element with absolute positioning is always relative to the first parent that has a relative position;
- when you use absolute positioning you place the absolutely positioned element in relation to a parent container and the parent container is the positioning context
what means "parent"?
rospa
2,945 Points"Child" and "Parent" is a term we use to describe elements on a page and their relation to each other. Things that contain other elements are referred to as the parent, and elements that are contained are called a child. For example:
<div>
<h2>Heading</h2>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
The <div> contains (is a parent to) the <h2> and <ul> elements.
The <ul> contains (is a parent to) the <li> elements.
Or we can say
The <h2> and <ul> elements are contained within (are children to) the <div> element.
The <li> elements are contained within (are children to) the <ul> element.
When we use absolute positioning, it only cares that the thing we're trying to position with position: absolute on it is contained within a parent with position: relative on it. So if our <div> was set to relative, then any of its children (<h2>, <ul> and <li>) could have position:absolute set on them and be positioned.
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 PointsOkay thank you for your answer, but if I dont position div as a relative, and i set my children h2,ul,li elements to absolute position, whats then?
rospa
2,945 PointsI believe it gets positioned relative to the root of the document, the <html> tag, when there's no position: relative parent to be found.
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 PointsI did exactly as you said about parent element from your code example, so why the list item 1 with id "vaikas" is not positioned at the heading element which has position relative and it is a parent element of the vaikas id.
<div id="relativu"> <h2 id="absoliutu">Heading</h2> <ul> <li id="vaikas">list item 1</li> <li>list item 2</li> </ul> </div>
<style>
relativu {
background: red; }
absoliutu {
position:relative; }
vaikas {
position:absolute; top:0; right:0; } </style>
Alexander La Bianca
15,960 PointsYou are close. But the h2 element is not the parent of the li element.
<div id="relativu"> <!--IS PARENT OF absoliutu AND ul. ALSO GRANDPARENT OF li-->
<h2 id="absoliutu">Heading</h2> <!--IS CHILD OF relativu. ALSO SIBLING OF ul-->
<ul> <!--IS PARENT OF BOTH li's. ALSO SIBLING OF absoliutu-->
<li id="vaikas">list item 1</li> <!--IS CHILD OF ul. ALSO SIBLING OF li -->
<li> list item 2</li>
<ul>
</div>
If you keep your html nested it will be easier for you to tell who is a parent and who is a child. So your "relativu" is the parent of all elements. The ul element is a child of the "relativu" and has two li child elements.
Check this image out: https://www.google.com/search?q=the+dom+tree+parent+child+relationship&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjahMClqYnVAhXB3YMKHXAQA8sQ_AUIBigB&biw=1920&bih=901#imgrc=w99YyJbGaetlOM:
It describes how the parent / child relationship works
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Pointsthank you Alexander, i already got the answer
rospa
2,945 Pointsrospa
2,945 PointsThose properties have a few different uses, but the most common one is when you want to position something, like a picture or another div for example, on the page in a specific position. A good way to remember which one is which is this:
#container { position: relative; }means "Position whatever is inside of me relative to my top left corner"#picture { position: absolute; }means "Position me absolutely within a relative container"You can then use the
top:andleft:(orbottom:andright:) properties to position your#pictureabsolutely.This code would have your
#picture50px further down, and 100px further right from the top left corner of your#container.Hope this helps!