반응형
CSS-div를 포함하는 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배치됩니다.
참고 URL : https://stackoverflow.com/questions/15358646/css-position-div-to-bottom-of- 포함 -div
반응형
'programing tip' 카테고리의 다른 글
| 인식 할 수없는 속성 'targetFramework'. (0) | 2020.07.27 |
|---|---|
| 파이썬에서 __str__에 대해 혼란스러워했습니다. (0) | 2020.07.27 |
| SQL- 문자열 검색 중 대소 문자 무시 (0) | 2020.07.27 |
| 오류 : 해당 속성 없음 : GROUP. 클래스 : org.gradle.api.publication.maven.internal.ant.DefaultGroovyMavenDeployer (0) | 2020.07.26 |
| Android / Java에서 JavaScript setInterval / setTimeout에 해당하는 것은 무엇입니까? (0) | 2020.07.26 |