내 코드의 단순한 구현 일뿐입니다. 두 이미지에 bg 색상과 텍스트가있는 블록을 추가하고 싶지만 position: absolute작동하지 않습니다. 어떡해?
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.text {
position: absolute;
bottom: 0;
left: 0;
}<div class="container">
<div>
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</div>
<div>
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
<div class="text">text</div>
</div>
</div>클래스 text가 position: absolute있지만 직계 부모 ( div이 경우)는 위치가 지정되지 않았으므로 가장 가까운 위치에있는 부모 또는 .text위치 absolute가 지정된 body부모가 나타나지 않는 경우 위치가 지정됩니다.
그러니 그냥 추가 position: relative로 .text부모입니다.
.container{
display:grid;
grid-template-columns: 1fr 1fr;
}
.relative {
position: relative;
}
.text{
position:absolute;
bottom:0;
left:0;
}<div class="container">
<div>
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</div>
<div class="relative">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
<div class="text">text</div>
</div>
</div>자세한 내용은 freecodecamp 에서이 링크를 확인하십시오.
한 가지 주목할 점은가있는 요소가
position: absolute가장 가까운 위치에있는 조상을 기준으로 위치 한다는 것 입니다. 즉, 상위 요소는.이 아닌 위치 값을 가져야합니다position: static.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다