CSS : 오른쪽 하단에 요소를 배치하는 방법은 무엇입니까?

CSS : 오른쪽 하단에 요소를 배치하는 방법은 무엇입니까?

---

오른쪽 하단에 "Bet 5 days ago"라는 텍스트 요소를 배치하려고합니다. 어떻게 할 수 있습니까? 그리고 더 중요한 것은 CSS를 정복 할 수 있도록 설명해주세요!

---

HTML이 다음과 같다고 가정 해 보겠습니다.

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

그런 다음 CSS를 사용하여 해당 텍스트를 다음과 같이 오른쪽 하단에 표시 할 수 있습니다.

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

이것이 작동하는 방식은 절대적으로 배치 된 요소가 항상 상대적으로 배치 된 첫 번째 상위 요소 또는 창에 대해 배치된다는 것입니다. 상자의 위치를 ​​상대 위치로 설정했기 때문에 상자의 .bet_time오른쪽 가장자리를 오른쪽 가장자리에 .box, 아래쪽 가장자리를 아래쪽 가장자리에 배치합니다..box

---

position: relative;상자에 CSS 를 설정합니다 . 이로 인해 내부 개체의 모든 절대 위치는 해당 상자의 모서리를 기준으로합니다. 그런 다음 "Bet 5 days ago"줄에 다음 CSS를 설정합니다.

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

당신이 공간을 필요로하는 텍스트 멀리 떨어진 가장자리에서, 당신은 변경 될 수 있습니다 0에 2px또는 이와 유사한.

참고 URL : https://stackoverflow.com/questions/3956043/css-how-to-position-element-in-lower-right