css-div를 포함하는 div의 맨 아래에 위치

컨테이너 div의 맨 아래에 div를 배치하려면 어떻게해야합니까?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

이 코드는 페이지 하단에 "내부"라는 텍스트를 넣습니다.

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

될 필요가있다

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

절대 위치 지정은 DOM 내에서 상대적으로 가장 가까운 위치에있는 부모를 찾습니다. 정의되지 않은 경우 본문을 사용합니다.

할당 position:relative에 .outside다음과 position:absolute; bottom:0;당신에 .inside.

이렇게 :

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

추가 position: relative에 .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

상대적으로 배치 된 요소는 여전히 문서에서 요소의 정상적인 흐름에있는 것으로 간주됩니다. 반대로 절대적으로 배치 된 요소는 흐름에서 제거되므로 다른 요소를 배치 할 때 공간을 차지하지 않습니다. 절대적으로 배치 된 요소는 가장 가까운 배치 된 조상을 기준으로 배치됩니다. 배치 된 조상이 존재하지 않으면 초기 컨테이너가 사용됩니다.

"초기 컨테이너"는 <body>이지만 위를 추가하면 .outside위치 가 지정됩니다.