Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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