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

Joe Consterdine
Joe Consterdine
13,965 Points

When does pos: rel + pos: absolute fail?

Hey guys,

was wanting to ask this a while ago.

so taking the standard example of this:

.parent {
position: relative;
width: 1000px;
height: 1000px;
}
.child {
position: absolute;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
}

The values aren't important here, it's merely an example. I would obviously need to add css3 transform etc.

So this works fine most of the time, but I noticed sometimes it just screws everything up.

I guess it's when it becomes a bit more complicated with divs inside divs which are inside other divs etc.

So what situations does this break? Is it down to layout issues? For e.g maybe someone forgot a clearfix or something?

What are the rules for this to work? Does the parent need a height set?

A lot of the time I just hope this will work, and 90% of the time it does.

Sometimes though, with complicated layouts things just break and I don't know what to do then.

Any help much appreciated :)

Cheers!

2 Answers

Joe Consterdine
Joe Consterdine
13,965 Points

Hi Garrett,

I know how to use it but there a unique occasions when it doesn't work.

Just wondering if anyone has had the same experience.

Joe