CSS day12

position

z-index

웹 요소 위치 지정

position을 알아보기전 알아야할 속성이 있다. left, right, top, bottom 속성은 position 속성으로 기준위치를 정하면 기준 위치로부터 얼마나 떨어질 것인지 지정하는 속성이다.

종류	설명
left	기준 위치에서부터 요소를 왼쪽으로 얼마나 떨어뜨릴 값 지정
right	기준 위치에서부터 요소를 오른쪽으로 얼마나 떨어뜨릴 값 지정
top	기준 위치에서부터 요소를 위쪽으로 얼마나 떨어뜨릴 값 지정
bottom	기준 위치에서부터 요소를 아래쪽으로 얼마나 떨어뜨릴 값 지정

position

position 속성은 웹 문서 내에서 요소들의 위치를 결정하는 방식을 설정하는 속성으로 속성을 잘 사용하면 원하는 지점에 요소의 위치를 배치하는 것이 가능해진다. 그러나 그만큼 실수도 많이 하는 부분이다. 속성값의 종류로는 4가지로 static(기본값), relative(상대위치), fixed(고정위치), absolute(절대위치) 결정 방식이 있다.

종류	설명
static	기본값으로 HTML 요소의 위치를 결정하는 기본적인 방식으로 top, left, right, botton 속성값을 사용하지 않고 단순히 웹 페이지 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식이다.
relative	HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식으로 top, left, right, botton 속성값을 사용하여 위치를 지정한다.
fixed	뷰 포트를 기준으로 위치를 설정하는 방식으로 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치한다.
absolute	뷰 포트를 기준으로 위치를 결정하는 방식으로조상요소를 기준으로 위치를 결정하게 된다. 위치가 설정된 조상요소를 가지지 않으면 body 요소를 기준으로 위치가 결정된다.

relative

<!--생략-->
...
.relative1{
    width: 200px;
    background-color: deeppink;
    margin-left: 50px;
    padding: 20px;
}
.relative2{
    position: relative;
    width: 400px;
    top: 50px;
    left: 100px;
    background-color: deepskyblue;
    padding: 20px;
}
...
    <div class="relative1">상대위치 지정방식1</div>
    <div class="relative2">상대위치 지정방식2</div>
...
<!--생략-->

relative2 클래스 박스는 기본 위치에서 위로부터 50px, 왼쪽으로부터 100px 만큼 떨어진 것을 볼 수 있다. 기본 위치를 기준으로 위치를 재설정하는 방식인 상대 위치 결정방식이다.

fixed

<!--생략-->
...
#fx{
    position: fixed;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 100px;
    background-color: gold;
}
...
<div id="fx"></div>
<div id="content">
	<p>Lorem ipsum dolor sit amet consectetur...</p>
				...
	<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
...
<!--생략-->

fx 아이디 요소 박스의 위치가 디스플레이 화면상의 표시 영역을 기준으로 위쪽에서 10px, 오른쪽에서 10px 만큼 떨어져있다. 디스플레이 화면를 기준으로 위치를 결정하는 방식인 고정 위치 결정방식이다.

absolute

<!--생략-->
...
#ab1{
	top: 0; right: 0;
}
#ab2{
	bottom: 0; right: 0;
}
#ab3{
	bottom: 0; left: 0;
}
#ab4{
	top: 200px; left: 200px;
}
...
<div id="wrap">
    <div class="box" id="ab1"></div>
    <div class="box" id="ab2"></div>
    <div class="box" id="ab3"></div>
    <div class="box" id="ab4"></div>
    <div class="box" id="ab5"></div>
</div>
...
<!--생략-->

각 박스 요소마다 상위요소을 기준으로 위치를 지정한 것을 확인 하였고 이러한 방식이 절대 위치 결정방식이다.

z-index

HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 겹칠 수 있다. z-index는 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 사용하게된다. z-index의 크기가 클수록 위에 위치하고 작을 수 록 아래 위치하게된다.

<!--생략-->
...
#b1{
    left:50px;
    top: 200px;
    background-color: pink;
    z-index: 10; /* z-index : 순서*/
}
#b2{
    left: 200px;
    top: 90px;
    background-color: greenyellow;
    z-index: 100;
}
#b3{
    left:70px;
    top: 50px;
    background-color: gold;
    z-index: 1;
}
...
<div id="wrapper">
    <div id="b1" class="box">첫번째 div</div>
    <div id="b2" class="box">두번째 div</div>
    <div id="b3" class="box">세번째 div</div>
</div>
...
<!--생략-->

z-index의 크기가 가장 높은 #b2요소가 맨 위에 쌓이고 그 밑으로 z-index의 크기가 낮은 순으로 쌓이게된다.