Position
요소의 위치를 결정하는 방식을 설정
1.정적 위치 지정방식
-static position. 기본값
-HTML 요소의 위치를 결정하는 기본적인 방식
-단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
2.상대 위치 지정방식
-realative position
-HTML 요소의 기본 위치(✔정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식
-top, left, right, bottom 속성값을 사용하여 재설정
3.고정 위치 지정방식
-fixed position
-웹 페이지가 스크롤 되어도 고정위취로 지정된 요소는 항상 같은 곳에 위치
-뷰포트를 기준으로 위치를 설정하는 방식
-top, left, right, bottom 속성값을 사용할 수 있음
4.부모태그를 이용한 고정 위치 지정방식
-sticky position
-fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위칫값을 사용하는 방식
-익스플로러에서는 작동하지 않음
5. 절대 위치 지정방식
-absolute position
-뷰포트를 기준으로 위치를 설정하는 방식
-조상요소를 기준으로 위치를 지정할 수 있음
-조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
-조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 정적 위치 지정 방식이 아니여야함
-top, left, right, bottom 속성값을 사용할 수 있음
위치 설정 안할시 틀안에서 가장 왼쪽위로 설정됨
코드와 예시를 통해 자세하게 알아보자
상대 위치 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상대 위치 지정 방식</title>
<style>
div{
width: 200px;
padding: 20px;
}
.realative1{
background-color: deeppink;
}
.realative2{
position: relative;
background-color: deepskyblue;
left: 200px;
top: 100px;
}
.realative3{
position: relative;
background-color: gold;
right: 100px;
bottom: 50px;
}
</style>
</head>
<body>
<h2>상대 위치 지정 방식</h2>
<div class="realative1">상대 위치 지정 방식1</div>
<div class="realative2">상대 위치 지정 방식2</div>
<div class="realative3">상대 위치 지정 방식3</div>
</body>
</html>
결과
고정위치 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고정 위치 지정 방식</title>
<style>
#fx{
position: fixed;
width: 100px;
height: 200px;
background-color: gold;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<h2>고정 위치 지정 방식</h2>
<div id="fx"></div>
<div id="content"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quas expedita suscipit nulla, totam modi dolor tempora neque illum, ut odit aspernatur quaerat ad hic placeat eos unde mollitia quis?</p>
</body>
</html>
결과
sticky Position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky</title>
<style>
html,body{margin: 0; padding: 0;}
.header{
height: 80px;
background-color: gold;
}
.container{
display: flex;
flex-flow: row nowrap;
}
.content{
box-sizing: border-box;
width: 80%;
height: 800px;
background-color: deepskyblue;
}
.sidebar{
position: sticky;
box-sizing: border-box;
width: 20%;
background-color: deeppink;
height: 400px;
top: 10px; /*상위 부모 컨테이너의 가장 상단에서부터 적용 */
}
.footer{
background-color: seagreen;
height: 200px;
}
</style>
</head>
<body>
<header class="header"></header>
<main class="container">
<section class="content">메인 컨텐츠</section>
<aside class="sidebar">Sticky 적용하기</aside>
</main>
<footer class="footer">푸터</footer>
</body>
</html>
결과
스크롤을 하여도 따라 내려온다
절대위치 지정방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>절대 위치 지정 방식</title>
<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: 100px; left: 150px;}
</style>
</head>
<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>
</html>
결과
Positon을 이해하고 적절히 사용하면 요소의 위치를 설정할 수 있다.
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_float (0) | 2023.03.30 |
|---|---|
| CSS_z-index (0) | 2023.03.30 |
| CSS_디스플레이 (0) | 2023.03.30 |
| CSS_박스 모델 (0) | 2023.03.30 |
| CSS_배경 문법 (1) | 2023.03.30 |
