1. position(매우 중요)
- absolute: 절대적 위치 좌표를 설정합니다.
- fixed: 화면을 기준으로 절대적 위치 좌표를 설정합니다.
- position 속성은 반드시 다음 스타일 속성(top, bottom, left, right)과 함께 사용한다.
* position법칙
1. absolute를 사용하면 부모의 relative요소 기반으로 박스가 올라온다. 그렇기 때문에 일반적으로
2. 자식요소에 absolute를 사용하면 부모요소의 relative를 넣어준다.
3. top, bottom중 하나, left, right중에 하나로 위치를 조정한다.
* z-index 속성
- HTML 태그는 사실 3D형태를 나타내고 있다. 이러한 순서를 변경할 때에 z-index 속성을 사용한다. 큰 값을 입력할 수록 위로 올라온다.
* 예제 1
<!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>Document</title>
<style>
* {margin: 0; padding: 0;}
.list {
width: 50%; /* 바디 영역 기준 50% */
margin: 0 auto;
border: 1px solid #777;
}
p {height: 100px;}
.content {
position: relative;
}
.item1 {background-color: aqua;}
.item2 {
background-color: red;
/* 포지션 absolute를 적용하면 부모에 relative가 들어갑니다. (들어가지 않으면 위치가 body 기준이 됨) */
/* 포지션을 적용하면 top, bottom 중 1개, left, right 중 1개 */
position: absolute;
top: 10px; /* 위치 조정*/
left: 30px;
width: 50px; /* 크기 조정*/
height: 50px;
}
.item3 {background-color: yellow;}
</style>
</head>
<body>
<div class = "list">
<div class = "content">
<p class ="item1">포지션</p>
<p class ="item2">포지션</p>
<p class ="item3">포지션</p>
</div>
</div>
</body>
</html>
* 예제 2
<!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>Document</title>
<style>
section {
width: 500px;
overflow: hidden;
margin: 0 auto;
}
section .box {
float: left;
width: 25%;
background-color: aqua;
height: 100px;
}
.pos {
background-color: red;
/* 상대 위치 (박스의 원래 위치) 기준으로 z축 올림 */
/* position: relative; */
position: absolute;
top: 20px;
left: 10px;
}
</style>
</head>
<body>
<!-- position: relative; 가 있는 위치 기준으로 올라가게 됩니다. -->
<section style = "position: relative;">
<div class = "box">박스1</div>
<div class = "box">박스1</div>
<div class = "box">박스1</div>
<div class = "box">
박스1
<div class = "pos">포지션</div>
</div>
</section>
</body>
</html>
* 예제 3
<!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>Document</title>
<style>
* {margin: 0; padding: 0; list-style: none;}
section{
height: 2000px;
background-color: aqua;
margin-top: 150px;
}
header{
background-color: #fff;
position: fixed; /* 스크롤을 따라다님 */
left: 0;
top: 0;
width: 100%;
text-align: center;
z-index: 5; /* 포지션이 겹칠 때 우선순위를 주는 속성 */
}
.menu ul{background-color: #000;}
.menu ul li {display: inline;}
.menu ul li a {
display: inline-block;
color: #777;
text-decoration: none;
width: 50px;
height: 50px;
line-height: 50px;
}
.side{
position: fixed;
right: 0;
top: 200px;
/* 포지션이 겹치는 경우 z축의 우선순위 지정 보통 1~10 사이 값(숫자가 올라갈 수록 올라옴) */
z-index: 10;
background-color: #282828;
text-align: center;
}
.side ul li a {
color: #fff;
text-decoration: none;
font-size: 14px;
display: block; /* a가 인라인이라 height가 안들어감 block으로 변경 */
height: 50px;
line-height: 50px;
width: 100px;
border-top: 1px solid #777;
}
</style>
</head>
<body>
<header>
<div>
<img src="img/bgimg.png" alt="로고">
</div>
<nav class = "menu">
<ul>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</nav>
</header>
<aside class="side">
<ul>
<li><a href="#">카톡</a></li>
<li><a href="#">전화번호</a></li>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</aside>
<section>
내용.....
</section>
</body>
</html>
* 예제 4(sticky)
<!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>Document</title>
<style>
.inner1 {height: 200px; background-color: yellow;}
.inner2 {
background-color: red;
/*
1. sticky는 top, bottom, left, right 중 필수적으로 하나를 설정해야 합니다.
2. 부모 태그에 overflow 속성이 있다면 동작이 안됩니다.
3. top 속성에 fixed 되는 지점을 기록하면 됩니다.
*/
position: sticky;
top: 0px;
left: 0;
}
.inner3 {height: 2000px; background-color: green;}
</style>
</head>
<body>
<section>
<div class="inner1">
내용...
</div>
<aside class = "inner2">
sticky는 특정 높이 전까지는 고정으로 있다가, 특정 높이 도달하면 fixed 되는 속성
</aside>
<div class = "inner3">
내용...
</div>
</section>
</body>
</html>
* 예제 5
<!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>Document</title>
<style>
*{margin: 0; padding: 0;}
.wrap{
border: 1px solid #999;
width: 800px;
margin: 0 auto;
position: relative;
padding: 10px;
}
.wrap-img {
position: absolute;
top: 10px;
left: 10px;
}
.wrap-img img {
width: 50px;
}
.wrap-content {
padding-left: 60px;
overflow: hidden;
}
.wrap-content textarea{
width: 100%;
box-sizing: border-box;
height: 150px;
resize: vertical;
}
.wrap-content .left {
float: left;
}
.wrap-content .right {
float: right;
}
.left input {display: block;}
</style>
</head>
<body>
<div class = "wrap"> <!-- margin: 0 auto -->
<div class = "wrap-img"><!-- 포지션-->
<img src ="img/bgimg.png" alt = "물고기">
</div>
<div class = "wrap-content"> <!-- 패딩 left -->
<textarea>힌트: 이미지 영역을 position absolute를 사용합니다. </textarea>
<div class = "left"> <!-- float: left-->
<input type="text">
<input type="text">
</div>
<button type="button" class = "right">등록하기</button> <!-- float: right -->
</div>
</div>
<div class ="wrap">
<div class = "wrap-img">
<img src = "img/bgimg.png" alt="물고기">
</div>
<div class = "wrap-content">
<div class = "left">
<p style="margin: 0;"><strong>제목</strong></p>
<p style="margin: 0;"><small>내용</small></p>
</div>
<button type = "button" class = "right">삭제</button>
<button type = "button" class = "right">수정</button>
</div>
</div>
</body>
</html>
