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 Create an Image Caption with Absolute Positioning

Ryan Wilson
Ryan Wilson
3,654 Points
Posted by Ryan Wilson
Ryan Wilson
3,654 Points

Position: absolute;

Hi,

Just curious why when i select

position: absolute; { bottom: 0; right: 0; }

it does not position in the bottom right hand of the browser.

However when i select

position: absolute; { top: 0; right: 0; }

It will position in the top right of the browser.

figcaption { font-size: .9em; line-height: 1.5; color: #fff; padding: 1em;
background: rgba(19,43,102, .85);

position: absolute; bottom: 0; right: 0; }

<figure> <img class="feat-img" src="img/treats.svg" alt="Drinks and eats"> <figcaption> <h4>Featured Drinks & Eats!</h4> Croissant macaroon pie brownie cookie marshmallow liquorice gingerbread caramels toffee. </figcaption> </figure>

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It goes directly to the bottom right for me.

Perhaps you have some additional HTML and/or CSS not shown here that's affecting it?

Ryan Wilson
Ryan Wilson
3,654 Points
Ryan Wilson
Ryan Wilson
3,654 Points

Hi Steven,

Thanks for the reply, I thought it should go to the bottom, its most likely a piece of HTML or CSS like you said that i've missed placed when I was moving things about, i'll have another look over it, thanks for your help. Have a great day. Ryan