position
요소의 위치 지정 방식을 설정
static 지정 방식 없음 (기본값)
relative 요소 자신을 기준으로 배치
absolute 부모 요소를 기준으로 배치
fixed 브라우저(뷰포트)를 기준으로 배치
sticky 스크롤 영역을 기준으로 배치
position과 함께 사용하는 속성
top,bottom : position 기준에 맞는 위, 아래쪽 거리를 설
auto 브라우저가 계산 (기본값)
단위 px, em등 단위로 지정
% 위치상의 부모요소의 height의 비율 로 지정 음수값 허용
left,right : position 기준에 맞는 왼쪽, 오른쪽 거리를 설정.
auto 브라우저가 계산 (기본값)
단위 px, em등 단위로 지정
% 위치상의 부모요소의 width의 비율로지정 음수값 허용
<!DOCTYPE html>
<html lang="ko">
<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>
body {
height: 3000px;
}
.container {
width: 400px;
height: 300px;
border: 4px dashed gray;
position: relative;
}
.box {
width: 150px;
height: 100px;
background: red;
border: 4px dashed orange;
position: absolute;
bottom: 100px;
right: 200px;
}
.banner {
width: 100px;
height: 600px;
border: 1px solid #000; background: orange;
position: fixed;
top: 10%;
right: 5%;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<aside class="banner"></aside>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_position(absolute)_22.04.12(Tue) (0) | 2022.04.12 |
|---|---|
| CSS_position(relative)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_박스띄우기(실습3)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_박스띄우기(실습2)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_박스띄우기(실습)_22.04.12(Tue) (0) | 2022.04.12 |