css에서 position 속성은 내가 원하는 위치로 원하는 컨텐츠를 배치할 수 있는
중요한 속성이다.
static을 제외한 relative, absolute, fixed는
top, left, bottom, right 속성과 함께 쓸 수 있다.
.test{position:absolute; top:0; left:100px;}
* 아래의 속성 외에 sticky라는 속성도 존재한다.
2020/11/20 - [Frontend/CSS] - [css 속성] position sticky
[css 속성] position sticky
css를 이용해 position 값을 사용하다보면 주로 사용하는 position 값은 static, relative, absolute, fixed 이 4가지가 될 것이다. 그도 그럴것이 이번에 소개할 position 값인 sticky의 경우엔 IE(익스플로어)에..
abcdqbbq.tistory.com
1. static
기본값으로 아무런 position값을 주지 않았을 경우 static이 적용된다.
position : static 일 경우 top, left 등의 조정 값들은 먹히지 않는다.
2. relative
주로 position : absolute; 속성과 함께 쓰이는 속성이다.
자식 요소에 적용된 absolute의 위치에 대해 기준을 잡는다.
3. absolute
position : relative 속성과 함께 쓰이는 속성이다.
가장 가까운 부모 요소에 있는 relative를 찾아서
그 요소의 위치를 기준으로 위치를 잡는다.
※ relative 뿐만 아니라 부모 요소에 fixed나 absolute로 설정이 되어있어도
그 부모의 위치값을 기준으로 absolute를 잡는다.
<style>
.wrap{padding:20px;}
.box1{position:relative; border:1px solid #333; width:100px; height:100px;}
.box2{background:skyblue; width:200px; height:200px;}
.inr{position:absolute; top:0; left:0; width:50px; height:50px; color:#fff;}
.box1 .inr{background:blue;}
.box2 .inr{background:red;}
</style>
<body>
<div class="wrap">
<div class="box1">
<div class="inr">box1 inr</div>
</div>
<div class="box2">
<div class="inr">box2 inr</div>
</div>
</div>
</body>
위와 같은 상황을 예로 들었을 때,
.box1 안에 .inr는 .box1에 설정된 relative를 기준으로 top:0, left:0 이 적용 되었고
.box2 안에 .inr는 .box2가 relative가 설정되어있지 않고 그 위에 다른 부모 요소들에도
relative가 없어 기준을 잡을 부모가 없기 때문에 body태그에 top:0, left:0의 위치로 잡혔다.
4. fixed
absolute가 relative를 기준으로 위치를 잡는다면
fixed는 화면을 기준으로
말 그대로 아예 고정을 시켜버리는 것을 말한다.
<style>
.wrap{padding:20px;}
.box1{position:fixed; top:0; right:0; border:1px solid #333; width:100px; height:100px;}
.box2{background:skyblue; width:200px; height:200px;}
.inr{position:absolute; top:0; left:0; width:50px; height:50px; color:#fff;}
.box1 .inr{background:blue;}
.box2 .inr{background:red;}
</style>
<body>
<div class="wrap">
<div class="box1">
<div class="inr">box1 inr</div>
</div>
<div class="box2">
<div class="inr">box2 inr</div>
</div>
</div>
</body>
위의 예로 봤을 때,
.box1을 화면 기준으로 오른쪽으로 위로 고정을 시켜버렸고
그 안에 .inr도 fixed가 된 .box1을 기준으로 위치를 잡고있다.
fixed시킨 경우 화면을 기준으로 위치를 잡는거라 스크롤을 한다해도
항상 그 위치를 유지한다.
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] z-index 우선순위 주기, z-index -(음수) 처리 (0) | 2020.03.31 |
|---|---|
| [css 속성] float (float 해제, clear) (0) | 2020.03.24 |
| [css 속성] display (block, inline, inline-block, table) (0) | 2020.03.06 |
| 가상 클래스 vs 가상 요소 (0) | 2020.03.06 |
| CSS 우선순위 (0) | 2020.03.04 |