CSS/개념정리
[속성] position 및 top, right, bottom, left 속성
xowoony
2022. 9. 6. 23:04
학습일 : 2022. 09. 05
position 속성
position 속성(Property)은 해당 요소가 어떻게 위치할 것인가에 대한 설정이다.
기본 값은 static 이고, 사용할 수 있는 속성 값은 아래와 같다.
static : 해당 요소가 원래 위치해야하는 위치에 위치하도록 한다.
relative : 해당 요소가 원래 위치해야하는 위치에 위치하거나 해당 위치를 기준으로 움직이도록 한다.
absolute : position 속성 값이 static이 아닌 가장 가까운 부모를 기준으로 움직인다.
단, 그러한 부모가 없다면 문서를 기준으로 움직인다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
fixed : 뷰포트를 기준으로 움직이고, 스크롤의 영향을 받지 않는다. 다른 요소나 텍스트의 흐름에 영향을 끼치지 않는다.
top, right, bottom, left 속성
position 속성 값이 static이라면 무시된다.
top : 해당 요소의 윗변을 기준으로 이동한다. (bottom과 함께 쓰지 않는다.)
right : 해당 요소의 우변을 기준으로 이동한다. (left와 함께 쓰지 않는다.)
bottom : 해당 요소의 아랫변을 기준으로 이동한다. (top과 함께 쓰지 않는다.)
left : 해당 요소의 좌변을 기준으로 이동한다. (right와 함께 쓰지 않는다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position 및 top, right, bottom, left 속성</title>
<style>
body > div {
width: 20rem;
height: 20rem;
background-color: rgba(220, 100, 100, 50%);
position: absolute;
}
body > div > div {
width: 7.5rem;
height: 7.5rem;
}
body > div > div:first-of-type {
background-color: rgba(100, 220, 100, 50%);
}
body > div > div:nth-of-type(2) {
top: 2rem;
left: 2rem;
background-color: rgb(100, 100, 220);
position: fixed;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
반갑습니다!
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>====================실행결과====================
