HTML 태그, element가 화면상에 어디에 위치 할 것인가를 결정하는 속성입니다.
box model이 부피감, element와 element 사이의 간격을 결정하는 속성이었다면
position은 각각의 element의 위치를 결정 할 수 있는 속성입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html {
border: 1px solid gray;
}
div {
border: 10px solid tomato;
margin: 10px;
}
#me {
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
left > right / top > bottom의 우선 순위를 가집니다.
static
기본적으로 CSS의 각각의 element들은 position의 기본값으로 static을 가지고 있습니다.
각각의 element들은 left, right, top, bottom과 같은 offset 값을 무시하고
딱 자기가 원래 위치 해야 하는 곳에 정적으로(static 하게) 위치 하게 됩니다.
(또는 위치와 관련된 설정을 하지 않은 상태)
relative
부모 위치를 기준으로 해서 자신의 자리에서
상대적으로 이동 시킬 때는 position : relative(상대적인)으로 설정 하면 됩니다.
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] fixed (0) | 2022.01.31 |
|---|---|
| [생활코딩] absoulte (0) | 2022.01.31 |
| [생활코딩] 마진 겹침 2 (0) | 2022.01.30 |
| [생활코딩] 마진 겹침 1 (0) | 2022.01.30 |
| [생활코딩] box-sizing (0) | 2022.01.29 |
댓글