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

Diego Mc
Diego Mc
7,678 Points
Posted by Diego Mc
Diego Mc
7,678 Points

Relative positioning

in around 01:55 Guil explaines that the button is 50% from the bottom of the header but in the browser it lookes like it's 75% from the bottom. can someone please explain to me why that happens?

1 Answer

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

Hey Diego,

it looks like this because the button has a height itself but is positioned at 50% from the bottom of the parent. So basically the height of the button is added beginning at 50% from the bottom of the parent element.

If you'd want to position the button vertically centered you would have to subtract the half of the button's height from the bottom value of 50% it has now.

Diego Mc
Diego Mc
7,678 Points
Diego Mc
Diego Mc
7,678 Points

Thank you:)