CSS: how to position an element in the lower right corner?

Question

I’m trying to position the text element "Bid 5 days ago" in the lower right corner. How can i do this? And, more importantly, explain so that I can conquer CSS!

Answer 1

Let's say your HTML looks something like this:

<div class="box"> <!-- stuff --> <p class="bet_time">Bet 5 days ago</p> </div> 

Then using CSS you can make this text in the lower right corner like this:

 .box { position:relative; } .bet_time { position:absolute; bottom:0; right:0; } 

How this works is that absolutely positioned elements are always positioned relative to the first relative positioned parent element or window. As we set the position of the window relative, .bet_time positions the right edge to the right edge of the .box , and its lower edge to the lower edge of the .box

Answer 2

Set CSS position: relative; in field. This leads to the fact that all the absolute positions of the objects inside will refer to the corners of this window. Then set the following CSS in the line "Bet 5 days ago":

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

If you need to touch the text further from the edge, you can change 0 to 2px or similar.