인프런 커뮤니티 질문&답변
작성한 질문수
position: absolute 설정 시 top의 기본값 질문입니다.
작성
·
594
1
<div class='container'> <div class='box1'></div> <div class="box2"></div> </div>
.container {
position:relative;
width: 300px;
height: 300px;
border: 1px solid;
}
.box1 {
width: 300px;
height: 300px;
background: blue
}
.box2 {
position: absolute;
width: 300px;
height: 300px;
background: red;
}
이해가 가지 않은 부분이 있어 예제를 단순화해서 질문을 올립니다.
box2의 경우 부모 컨테이너의 영역을 넘어서는 상황에서
container가 position: relative이고 box2를 position: absolute일 때
제 생각에는 box2의 경우 일반적인 문서 흐름을 벗어났기 때문에 box2가 box1을 겹칠 것으로 예상했습니다.
하지만 그렇지 않았고 top:0을 해주었을 때 비로소 겹치게 되었는데요.
원래 별다른 설정이 없다면 디폴트값이 top:0, left:0이 아닌가요?
답변 1
0
코딩웍스(Coding Works)
지식공유자
position: absolute; 를 주면 기볹거으로 top: 0; left: 0;로 좌표가 기본적으로 세팅되는데 .box2 위에 포지션 속성이 없는 .box1이 있어서 좌표가 top: 300px 이 되었네요.
저도 이런 경우로 작업한 기억이 없어서 왜 그런지는 이론적으로 설명드리려고 고민해봤는데...
명쾌한 설명이 떠오리지 않네요.
항상 position: absolute; 를 주고 top과 left를 줘서 위치시키는 방식이라서요.
현재 코드는 실전에서 좌표를 주는 부분이니까 너무 이론적인 부분으로 이해하려고 하지 마세요.