CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

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
203,728 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

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