CSS: cách định vị phần tử ở phía dưới bên phải?

Question

Tôi đang cố định vị trí phần tử văn bản "Đặt cược 5 ngày trước" ở góc dưới bên phải. Làm thế nào tôi có thể thực hiện điều này? Và, quan trọng hơn, hãy giải thích để tôi có thể chinh phục CSS!

Answer 1

phép nói rằng HTML của bạn trông giống như sau:

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

Sau đó, với CSS, bạn có thể làm cho văn bản xuất hiện ở góc dưới bên như sau:

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

Cách làm việc này là rằng các phần tử được định vị hoàn toàn luôn được định vị đối với phần tử cha mẹ tương đối vị trí đầu tiên hoặc cửa sổ. Bởi vì chúng tôi đặt vị trí của ô tương đối, .bet_time vị trí cạnh phải của nó vào cạnh phải của .box và mép dưới của nó ở cạnh dưới cùng của .box

Answer 2

Đặt CSS position: relative; trên hộp. Điều này làm cho tất cả các vị trí tuyệt đối của các đối tượng bên trong có liên quan đến các góc của hộp đó. Sau đó thiết lập CSS sau đây vào "Bet 5 ngày trước" dòng:

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

Nếu bạn cần không gian văn bản xa cạnh, bạn có thể thay đổi 0-2px hoặc tương đương.