반응형
# position
position 속성
- position 속성의 속성값: static, fixed, relative, absolute
- 텍스트 이미지 표 등의 요소를 웹 문서에 배치할 때 사용
속성값의 특징을 확인하는 조건
- 부모 자식 간에 발생하는 마진 병합 현상 유무
- top, right, bottom, left 속성 적용 유무
- 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무
| 구분 | 속성 | 설명 |
| 정적 위치 설정 | position:static | 각종 요소를 웹 문서의 흐름에 따라 배치 |
| 상대 위치 설정 | position:reletive | 웹문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치 |
| 절대 위치 설정 | position:absolute | 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치 |
| 고정 위치 설정 | position:fixed | 요소의 위치를 절대위치설정과 똑같은 방법으로 배치하되 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음 |
1. position : absolute , z-index
<!DOCTYPE html>
<html>
<head>
<title> position </title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) { background-color: red; }
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> position </title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) { background-color: red; left:100px; top: 100px;}
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
2. position : relative
고정되어 있지 않고 다른 요소에 의해 바뀔수 있습니다.
left , top 속성을 이용해 요소의 위치를 옮길 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title> absolute </title>
<style>
.con-box {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
}
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
<div class="con-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>포지션 연습</h1>
</body>
</html>
3. position:fixed
- 문서의 흐름과는 상관없이 원하는 위치에 요소를 배치
- 부모 요소가 아닌 브라우저 창 기준
브라우저 창 왼쪽 위 꼭지점( 0 0 ) 기분으로 좌표 계산
- 브라우저 창 화면를 스크롤하더라도 계속 같은 위치에 고정
4. z-index
- 한 요소 위에 다른 요소를 쌓을 때 사용
- z-index 속성값이 작을수록 아래에 쌓임
반응형
'CSS3' 카테고리의 다른 글
| [ CSS3 ] gradient / filter (0) | 2023.09.06 |
|---|---|
| [ CSS3 ] transform / transition / animation (0) | 2023.09.06 |
| [ css3 ] flex , 레이아웃구조 (0) | 2023.08.27 |
| [ css3 ] 선택자 , 스크롤, root , coding Convention (0) | 2023.08.24 |
| [ css3 ] 상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경 (0) | 2023.08.22 |