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

CSS CSS Layout Basics Positioning Page Content Positioning Elements Relative to Other Elements

Aaron Selonke
Aaron Selonke
10,323 Points
Posted by Aaron Selonke
Aaron Selonke
10,323 Points

Why does the absolute position change the shape of the block element?

Here is a simple screenshot of Guils video http://uploadpie.com/tyVbp

In the video Absolute position property is applied to two of the list items, with the UL element as the Positioning Context, OK.

The two list items are block elements, but when they have absolute position applied their shape changes to the size of their padding and content and lose the uniform shape of the other list items.
I kindof sense why that would be...

How would you keep the shape of the other list items now that the ones with the absolute positioning have lost their Block behavior?

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I believe you would need to just set a width/height of the divs

html

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

css

#1, #2 {
 position: relative;
}

#3, #4 {
   position: absolute;
}

div {
   width: 500px
  height: 200px;  
}

#3 {
   top: -75px;
   left: - 150px;
}

#4 {
  top: 150px;
  left: 300px;

}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

The above example is if you wanted some divs to be relative positioned and the other divs to be absolute to those items. If they will be absolute with no divs being relative, they will default to the closest relative ancestor which ultimately if none will be the body.

Aaron Selonke
Aaron Selonke
10,323 Points
Aaron Selonke
Aaron Selonke
10,323 Points

div { width: 500px height: 200px;
}

That makes sence. Reminded me not to think too hard =)

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

It is because absolutely positioned elements do not behave as block level elements and do not flow after each other like normal <div>does.

You will need to set a width and a height for a div that is absolutely positioned, depending what it contains.

Aaron Selonke
Aaron Selonke
10,323 Points
Aaron Selonke
Aaron Selonke
10,323 Points

All of the other UL list items are a uniform size. Is there a way to dynamically set the width and height of the two absolute positioned list items to keep the same shape as their sibling list items?

My goal is to make all the list items the same uniform shape independent of their positioning,