14 CSS Position
CSS Position
요소의 위치를 결정하는 방식을 설정한다.
CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있다.
1. 정적 위치(static position) 지정 방식
2. 상대 위치(relative position) 지정 방식
3. 고정 위치(fixed position) 지정 방식
4. 절대 위치(absolute position) 지정 방식
1) 정적 위치(static position) 지정 방식
HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식이다.
top, left, right, bottom 속성값을 사용할 수 없으며, 단순히 웹 페이지 흐름에 따라 차례대로 요소들의 위치를 결정한다
<style>
선택자 { position: static; }
</style>
2) 상대 위치(relative position) 지정 방식
상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다.
기본위치는 정적위치 지정방식일 때 결정되는 위치를 의미한다.
정적위치 지정방식과 상대위치 지정방식을 사용해보자 :)
[예시]
<style>
div{
border: 2px solid red;
width: 300px;
}
#static{
position: static;
}
#relative{
position: relative;
left: 300px;
top: 50px;
}
</style><body>
<div id="static">
<h2>정적위치 지정방식</h2>
<img src="./ruffy.png">
</div>
<div id="relative">
<h2>상대위치 지정방식</h2>
<img src="./ruffy.png">
</div>
</body>
[결과]
상대위치 지정방식의 결과를 보면 기본위치를 기준으로 설정값 만큼 이동한것을 확인할 수 있다.
3) 고정위치(fixed position) 지정방식
고정 위치(fixed position) 지정 방식은 뷰포트(가상화면으로 화면을 조정해줌)를 기준으로 위치를 설정하는 방식이다.
웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치를 유지한다.
뷰포트(view port)란?
- 브라우저들은 viewport로 알려진 가상의 화면을 가지고 있음
- 화면 display상의 표시 영역을 뜻함
- 데스크탑의 viewport는 브라우저 창의 viewport와 같음
- 모바일 viewport는 상하 좌우로 스크롤을 움직이거나 줌인, 줌아웃을 통해 viewport를 변경하며 사용
[예시]
<style>
#fx{
position: fixed;
/*고정위치 설정*/
top: 10px;
right: 10px;
width: 100px;
height: 200px;
background-color: gold;
}
#content{width: 800px;}
p {line-height: 30px;}
</style><body>
<h2>고정위치 지정방식</h2>
<div id="fx"></div>
<div id="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ducimus accusamus dolor consectetur et aliquam qui in assumenda
asperiores magni! Vel, optio. Non ratione, accusamus nemo eveniet
rem dolorem temporibus cupiditate.
</p>
/*밑으로 길게 p태그를 반복했으나 편의상 생략하겠습니다.*/
</div>
</body>
[결과]
4) 절대위치(absolute position) 지정방식
절대 위치(absolute position) 지정 방식은 뷰포트를 기준으로 위치를 결정하는 방식이다.
단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정한다.
위치가 설정된 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정한다.
* 위치가 설정된 조상요소란?
정적위치 지정방식을 제외한 방식(relative, fixed, absolute)로 위치가 설정된 조상요소를 의미한다.
[예시]
<style>
#wrap{
position: relative;
width: 500px;
height: 500px;
border: 3px solid red;
}
.box{
position: absolute;
width: 50px;
height: 50px;
background-color: deeppink;
}
#ab1{top: 0; right: 0;}
#ab2{bottom: 0; left: 0;}
#ab3{bottom: 0; right: 0;}
#ab4{top: 200px; left: 200px;}
</style>
<body>
<h2>절대위치 지정방식</h2>
<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>
</body>
[결과]
relative로 위치가 설정된 조상 div내에서만 위치 이동을 하는것을 확인할 수 있다
5) z-index 속성
HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수 있다.
z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다.
스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치한다.
[예시]
<style>
div#wrapper{ position: relative;}
div.box{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 25px;
}
#b1{
left: 50px;
top: 50px;
background-color: deeppink;
z-index: 10;
}
#b2{
left: 120px;
top: 70px;
background-color: deepskyblue;
z-index: 100;
}
#b3{
left: 190px;
top: 110px;
background-color: gold;
z-index: 200;
}
</style><body>
<h2>z-index</h2>
<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>
</body>
[결과]
z-index 사진 출처 : https://velog.io/@chang_keun/CSS-%ED%95%84%EC%88%98-%EA%B0%9C%EB%85%90-3-Position
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>