ex.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
width: 300px;
/* 세로는 콘텐츠의 크기만큼 작아지려 한다*/
background-color: royalblue;
}
.container .item {
border: 4px dashed red;
background-color: orange;
}
.container .item:nth-child(1) {
width: 100px;
height: 100px;
}
.container .item:nth-child(2) {
width: 140px;
height: 70px;
}
.container .item:nth-child(3) {
width: 70px;
height: 140px;
}출력
이를 CSS룰
.container {
width: 300px;
/* 세로는 콘텐츠의 크기만큼 작아지려 한다*/
background-color: royalblue;
position: relative;
}
.container .item {
border: 4px dashed red;
background-color: orange;
}
.container .item:nth-child(1) {
width: 100px;
height: 100px;
}
.container .item:nth-child(2) {
width: 140px;
height: 70px;
position: absolute;
right:10px;
bottom:10px;
}
.container .item:nth-child(3) {
width: 70px;
height: 140px;
}이렇게 바꾸면
결과는
이렇게 바뀌게 된다.
- position
원칙: 기준을 잡고 위치를 설정해야한다.!
그 기준을 잡아주는 속성이 바로 postition!
이 때 기본 속성인 static은 기준이 없으므로 이 때는 배치를 할 수 없다.
top botton left right z-index는 position과 같이 사용하는 (값이 아닌)속성들이라는 것을 기억해두자.
이 속성들은 요소의 각 방향별 거리를 지정해준다.
기본값은 auto로 브라우저가 계산해준다. 우리는 실재 우리가 원하는 위치로 이동시켜야 하므로 잘 사용하지 않는다.
그래서 우리는 직접 숫자와 단위를 입력해주어야 한다.
relative의 요소 자신을 기준으로 한다는 것의 의미는 '배치 전' 요소 자신의 유치를 기준으로 이동시킨다는 의미이다.
그리고 top: 30px; left: 30px을 입력해주면 위에서 아래로 30px 왼쪽에서 오른쪽으러 30px이동한다.
그리고 위 그림에서 보이듯이 자식2가 이동하더라도 자식1과 3은 자식2가 이동하기 전의 위치를 그대로 유지한다.
이 자식1과 자식3이 원래 위치를 유지하는 것이 일반적이지 않은 상황이기 때문에 relative는 거의 사용하지 않는다고 봐도 무방하다.
이는 요소2는 원래 위치에 그대로 있고 이동한 요소2는 요소2의 허상이라고 보는게 이해가 편하다.
실재 배치에서 가장 자주 사용하는 것은 absolute라는 기준이다.
현재 absolute를 적용하면 요소2는 없는 것마냥 취급되고 요소1과 요소3이 붙어있게 된다.
왜 이런 현상이 생기느냐 하면 자신이 배치될 기준이 부모 요소이므로 자식요소1,3과는 상호작용할 필요가 없어졌기 때문이다.
그런데 예를 보면 '부모 요소'를 기준으로 top에서 30px, right에서 30px 위치가 아닌 뷰포트를 기준으로 요소가 배치되는 것을 볼 수 있다.
position: absolute 는 '위치상' 부모요소라는 개념이 굉장히 중요해진다.
이 때 파란색 부모요소에 position: relative를 설정해주면 우리가 원하던 결과가 나온다.
즉, 위치상 부모요소가 원래 부모요소인 파란색 요소가 되었다는 것이다.
즉, position: absolute;는 다음과 같은 특징을 가진다.
단, 여기서 상위요소에 배치하고 싶다면 position: relative 뿐 아니라 그냥 position값을 상위요소가 가지고만 있으면 된다.
자식2의 배치 기준을 뷰포트로 설정하면 자식1,3과 더이상 상호작용하지 않게된다.
또한 position: fixed는 뷰포트를 기준으로 하므로 스크롤이 내려가더라도 뷰포트에 고정되어 있다!!
요소 쌓임 순서 (Stack order)
어떤 요소가 사용자와 더 가깝게 있는지 (위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
- 1번과 2번 조건까지 걑은 경우, HTML의 다음 구조일수록 위에 쌓임. (나중에 쌓은 것이므로)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div/>.container {
width: 300px;
/* height는 콘텐츠의 크기만큼 작아지려 한다*/
background-color: royalblue;
position: relative;
/* relative 는 실재로 배치하는 용도로는 안 씀 */
/* 구조상의 부모요소가 위치상의 부모요소가 되게 하는데 사용 */
}
.container .item {
border: 4px dashed red;
background-color: orange;
}
.container .item:nth-child(1) {
width: 100px;
height: 100px;
position: relative;
/* relative는 그 위치에서 요소가 이동해도 그 위치에 요소가 있다고 생각해야 함 */
}
.container .item:nth-child(2) {
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.container .item:nth-child(3) {
width: 100px;
height: 100px;
}결과
그리고
CSS를 다음과 같이 수정해보자.
.container .item:nth-child(1) {
width: 100px;
height: 100px;
position: relative;
z-index: 1;
/* relative는 그 위치에서 요소가 이동해도 그 위치에 요소가 있다고 생각해야 함 */
}결과
일단 여기서 의문을 가지고 다음으로 넘어가야 한다.
부모요소는 position 값이 있음에도 왜 position값이 없는 자식요소 아래에 있을까?
정답은 부모 자식 관계는 position과 z-index로 제어할 수 없다는 것이다.
z-index: 요소의 쌓임 정도를 지정
기본값 auto는 구조상의 부모 요소와 동일한 쌓임 정도로 일반적으로 0이라고 보면 된다.
숫자가 놈을수혹 위에 쌓인다. (2번째 비교 조건)
또한 알아두어야 할 사실이 있다.
바로 position 속성의 값이 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다!!!
(relative는 사실상 부모 구조요소를 지정하기 위한 것임을 CSS도 아는건가?
그래서 임의의 위치를 지정하는 position값을 가지는 요소들은 이미지처럼 취급하기 위해서?)
ex.
<span>123</span>span {
width: 100px;
height: 100px;
background-color: orange;
font-size: 40px;
position: absolute;
}결과
