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

118

컨테이너 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>

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

css position

— nagy.zsolt.hun
소스

.outside needsposition: relative;

— Imperative

상대, 예, 그리고 불행히도 child-div 콘텐츠를 보유하는 데 필요한 크기를 알지 못하므로 정적 값이 아닌 한 원래 질문으로 돌아갑니다. 하나의 div를 다른 div의 맨 아래에 배치하는 방법 ( "모든 것을 중단하지 않고").

— JosephK

답변:

136

.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 내에서 상대적으로 가장 가까운 위치에있는 부모를 찾습니다. 정의되지 않은 경우 본문을 사용합니다.

— 칼
소스

감사. 이유를 설명해 주시겠습니까?

— nagy.zsolt.hun

absolute가장 가까운 relative부모를 검색합니다 . 기본적으로는의 body의 document. 부모의 DOM 객체 (그래서 만약 .outside)가되는 속성이없는 relative당신의 .insidebody 태그의 맨 아래로 이동합니다.

" 절대가 DOM 내에서 가장 가까운 상대적 위치 부모를 찾습니다 위치, 하나는 몸을 사용합니다 정의되어 있지 않은 경우. "당신은 설명 너무 나를 위해 많이! 이제 저는 CSS를 이해하기 시작했습니다. 감사합니다!

— Simon Forsberg 2014

Absolute는 실제로 상대적으로 위치하는 가장 가까운 비 기본값 (= 정적) 위치의 조상을 검색합니다. 또한 직계 부모 일 필요는 없지만 예를 들어 조부모 일 수 있습니다.

— mzwaal

이것은 매우 나쁜 일정한 높이에 따라 달라집니다. 글꼴, 글꼴 크기, 패딩, 여백 및 신의 간단한 변경은 새로운 높이를 추측하기 위해 다른 실험이 필요한 것을 알고 있습니다.

— Anderson

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

이렇게 :

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

— dsgriffin
소스

이것은 고정 바닥 글의 기초가 될 수 있습니다.

— cade galt

나는 위치를 사용할 수 없습니다 : 절대; 두 번째 div. 이것이 제 제한입니다. 다른 옵션을 줄 수 있습니까?

— Piyush Dholariya

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

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

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

— 폭발 환약
소스