position은 요소의 위치를 지정하는 속성
static
: 기본값. 문서 흐름에 맞춰서 자동으로 배치absolute
: relative
, fixed
, absolute
중 하나의 속성을 가진 가장 가까운 부모 요소 기준 절대적 위치 지정relative
: 원래 있던 기본값 위치를 기준으로 상대적 위치 지정fixed
: 스크롤과 상관없이 항상 top
, right
, bottom
, left
중 한 곳에 위치 고정inherit
: 부모 요소의 속성값 상속position
속성값은 이처럼 총 5가지가 있으며, static
은 기본값이기에 따로 CSS파일에 작성하거나 자주 쓰이지는 않는다. 5가지 중에서 주로 많이 쓰이는 속성값은 부모 요소와 부모 요소를 기준으로 절대적 위치를 지정할 수 있는 absolute
와 relative
, 메뉴바나 네비게이션 바처럼 화면에 항상 같은 위치에 고정되어서 쓰여야 하는 요소에 지정하는 fixed
정도이다. 사실 sticky
같은 속성값이 더 있긴 하지만 현업에서는 잘 쓰이지 않는 것 같기도 하다. 처음 막 웹 개발에 발을 들였을 때에는 아무것도 모르고 그냥 써보기도 했고, 이런 속성값이 있다고 배우기도 했지만 길고 길었던 인턴 생활 중에도 해당 속성을 써본 적도 없었고 서비스의 기존 코드에도 사용된 걸 보지 못했던 것 같다.
그러니 relative
, absolute
, fixed
에 대해 알아보자.
relative
, absolute
, fixed
top
, right
, bottom
, left
값(픽셀 or 백분율) 지정 가능top
은 아래로, right
은 왼쪽으로, bottom
은 위로, left
는 오른쪽으로 즉, 반대쪽으로 움직이게 된다.relative
static
상태였을 때의 자신의 위치를 기준으로 상대적 위치를 지정하는 속성값absolute
값을 부여한 자식 요소의 기준이 될 부모 요소에 많이 사용되는 속성값absolute
fixed
웹 페이지의 레이아웃을 결정하는 중요한 속성 중 하나
HTML
요소의 대부분이 display
속성의 기본값인 블록(block) 또는 인라인(inline)의 값을 가진다.<p>
, <div>
, <ul>
, <ol>
, <form>
등<span>
, <a>
, <img>
등해당 요소끼리는 인라인처럼 적용되지만, 요소 내부에서는 블록처럼 적용되는 속성
해당 속성값이 지정된 요소들끼리는 인라인처럼 적용되어 한 라인에 여러 요소들이 들어간다. 하지만 너비와 높이, margin
이나 padding
값을 지정하여 블록 요소처럼 활용이 가능하다.
예)
<!DOCTYPE>
<html>
<head>
...
</head>
<body>
<div class="wrapper">
<div class="box1 inline-block">
1
</div>
<div class="box2 inline-block">
2
</div>
</div>
</body>
</html>
.box1 {
width: 100px;
height: 50px;
}
.box2 {
width: 200px;
height: 50px;
}
.inline-block {
display: inline-block;
}