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

How to position an absolute element above a its div?

How can I position an h3 element above its own div? I have given it absolute positioning and relative for its parent div. Now, it seems that the text below came up and the h3 went bottom. Please do help.

2 Answers

The text below would come up, as you removed the h3 from normal flow. Have you set your h3's top and left positioning?

h3 {
position:absolute;
top:-50px;
left:0;
}

Negative used for top value since you want it above/outside the parent div.

Jeff's pretty much right on the markup.

In general, an absolute element will 'think' the general top is the beginning of its parent element, not the website's nor the browser's. So, messing around with left and top will give you the result you want. You can always play with percentages (which I find more convenient), say for example, by assigning your top to be -25%, which will mean, depending on the parent element's height, it will go 25% of the parent's element height, above its top part, or start.