📍 position 속성의 역할
문서 상에서 요소를 배치하는 방법을 정의한다.
기본값은 position : static으로, 일반적인 html 문서의 흐름대로 요소를 배치하는 방식을 의미한다.
📌position : static : (기본)
기본적인 html 쌓임맥락에 따라서 화면 상 위치를 차지한다
<div>1</div>
<div>2</div>
<div>3</div>📌relative : absolute의 기준이 되는 요소
상대위치
position:relative는 그자체로는 특별한 의미가 없습니다.
딱히 어느 위치로 이동하지는 않습니다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다.
static을 선언한 요소와 relative를 선언한 요소의 차이점은 좌표 프로퍼티의 동작 여부 뿐 그외는 동일합니다.
📌absolute : 요소 내에 특정위치에 고정(특정요소 안에 위치)
<html>
<head>
<style>
body { margin: 0;}
.parent {
width: 150px;
height: 150px;
float: left;
/*position: relative;*/
}
.relative-box {
** position: relative;**
top: 10px;
left: 10px;
width: 150px;
height: 150px;
}
.absolute-box {
** position: absolute;**
top: 10px;
left: 10px;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="absolute-box">absolute box</div>
</div>
<div class="parent">
<div class="relative-box">relative box</div>
</div>
</body>
</html>절대위치
스크롤은 가능
요소 내에서 fixed 처럼 사용이된다.
해당 기준이 되는 요소는 (부모) position을 relative로 줘야 한다.
absolute로 되어있으면 부모 position이 relative인 요소가 나올때까지 찾아갑니다. 그리고 그 요소가 기준이 되어 그 요소 내에 특정 위치에 그려지게 된다.
(absolute 는 relative를 찾아가야한다. 한마디로 세트라고할수있다) relative 있는데 까지 부모를 찾아서 간다.
📍relative와 absolute의 차이점
position: relative와 position:absolute의 차이점을 좀 더 구체적으로 살펴보겠습니다.
relative는 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킵니다. 따라서 무조건 부모를 기준으로 위치하게 됩니다.
absolute는 부모에 static 이외의 position 프로퍼티가 지정되어 있을 경우에만 부모를 기준으로 위치하게 됩니다. 만일 부모, 조상이 모두 static인 경우, document body를 기준으로 위치하게 됩니다.
따라서 absolute 프로퍼티 요소는 부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있습니다.
위의 그림은 부모(회색상자)가 position프로퍼티가 지정되어 있지 않을때 (static), absolute와 relative의 차이를 볼 수 있습니다.
absolute가 적용된 상자의 경우 부모를 벗어나 body를 기준으로 top,left값에 의해 절대적으로 위치하는 걸 볼 수 있습니다. 반면 relative가 적용된 상자의 경우 부모를 기준으로 top,left값에 의해 움직이고 있습니다.
📌fixed : 화면상 특정 위치에 고정 (스크롤을 내려도 원하는 위치에 고정되어 있다.)
더 이상 쌓임맥락 안에서 해석되지 않는다(독립적으로 해석이 된다)
fixed로 되어있는 요소는 지우고 나머지를 먼저 그린다
그리고 fixed로 되어있는 요소를 정해진위치(top, right, left, bottom)에
그린다<div>1</div> <div class="fixed-div">2</div> <div>3</div>
📌sticky : fixed와 일반적인 (static)이 어느정도 혼합된 형태 (콘텐츠마다 다른 정보를 고정해야 하는 경우 유용하게 사용할 수 있는 속성이다.) -보통은 header에 많이 쓰임
static의 특성 : 쌓임맥락을 고려한다
fixed의 특성 : 특정위치에 고정된 자리를 유지한다
일반적으로 쌓임 맥락안에서 그려지지만
스크롤을 하여 정해진 위치(top, right, left, bottom)에 도달하면 fixed 처럼 고정이 되어 버린다 (아래 내용 요소에 따로 패딩을 줄 필요가 없다. header때문에 가려지지 않으니까) 자신이 포함되어있는 부모태그가 스크롤될때)
📌z-index(z-index 프로퍼티에 큰 숫자값을 지정할수록 화면 전면에 출력합니다. positon 프로퍼티가 static 이외인 요소에만 적용된다는 특징이 있습니다.)
요소의 위쪽을 결정하는 속성 (상대적인 값에 따라서),
static 인 경우에는 z-index를 줘도 소용없다
static은 코드를 쓴 맥락에 맞춰서 어디에, 어떻게 그려질지가 결정되기 때문에...
sticky나 absolute, fixed, relative 로 설정된 요소들만 그려질 위치를 설정하는 것이기에 z-index를 적용할 수 있다
1. z-index는 position이 지정되어 있어야 사용 가능하다.
<!-- html코드 -->
<div id='box1'>box1</div>
<div id='box2'>
box2
<div id='box3'>box3</div>
</div>/* CSS 코드 */
#box1 {
width: 200px;
height: 200px;
background-color: olivedrab;
font-size: 24px;
}
#box2 {
width: 200px;
height: 200px;
margin-top: -100px;
background-color: darksalmon;
font-size: 24px;
}
#box3 {
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: 100px;
background-color: darkorange;
font-size: 24px;
}box1, box2가 있고 box3는 box2에 속해있는 형태이다.
그 중 box1이 가장 위에 있길 바라며 z-index 값을 99로 설정했다.
#box1 {
······
z-index: 99
}결과는 다음 이미지와 같다.
이 결과는 z-index를 99999로 줘도 같다.
이유는 position을 지정해주지 않았기 때문이다.
z-index는 position이 지정되어 있어야만 적용되므로, #box1에 position: relative를 추가해주면 다음과 같은 결과를 얻을 수 있다.
2. 깊이(depth)가 같은 것끼리 비교한다
모든 box에 position을 지정한 후, z-index 값을 설정했다. (position과 z-index만 외에는 생략한다.)
#box1 {
position: relative;
z-index: 30;
}
#box2 {
position: relative;
z-index: 10;
}
#box3 {
position: relative;
z-index: 50;
}결과는 box1 - box3 - box2 순서로 나타난다.
3. z-index의 초기값은 0이 아니다.
📍z-index를 설정했는데 적용되지 않는다면 position을 확인하자.
z-index는 기본적으로 형제 요소끼리 비교가 우선이다.
하지만 형제의 z-index값이 auto라면 형제 요소의 자식도 확인해보자.
