※position 특징
위치를 정해주는 방법 중 하나로, 조상(부모)와 자식간의 관계에 의한 위치속성이다.
| 속성 | 속성명 | 설명 |
| position | static | 기본값 |
| absolute |
부모나, 조상요소에 대해 위치값을 부여받는다. 위치지정속성인 top, left, right, bottom의 값을 함께 적는다. |
|
| fixed |
브라우저에 대해 절대 위치값을 갖게 된다. 위치지정속성인 top, left, right, bottom의 값을 함께 적는다. |
|
| relative | 코딩의 흐름에서 자신이 갖는 위치가 기본값이며, 이를 바꾸고 싶을 때는 "left:20px" 처럼 값을 더 부여한다. 그러면 원래 자기의 위치에서 좌측으로 20px 들어가서 위치한다. -------------------------------------------------------- 또한, 기준역할을 지정받음(후손선택자에 absolute를 지정할때 사용하는 의미) |
|
| sticky |
스크롤 할때 고정으로 자리를 잡고 있다가 스크롤값이 어느정도 위치가 되면 스크롤을 따라 올라가게 된다. 이는 relation과 fixed의 중간정도의 성격을 갖고 있다. IE/Edge 15 이전 브라우저는 적용 안됨. 사파리 6.1부터도 -webkit- 벤더프리픽스를 붙여줄 것을 권한다. |
부모요소에 relative를 부여해 기준이 되는 위치를 정해 주고,
자식요소에는 absolute를 부여하게 되면,
absolute가 부여된 자식요소인 박스1~3까지는 top과 left로부터, 얼마씩 떨어진 위치에 자리를 잡는다.
일부러 겹쳐보았을 때, 이 박스들이 겹치는 것을 볼 수 있는데,
겹쳐져 있는 순서는 일반적으로 레이어처럼 작은 숫자, 먼저 코딩한 요소가 아래에 자리잡는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>위치속성 2 - position</title>
<style>
#wrap{
position: relative;
border: 1px solid #000;
top:200px;/*생략가능*/
}
#wrap>div{
width:150px;
height:150px;
background:rgb(0,153,255);
border:5px solid #000;
margin:50px;
position: absolute;
font-size: 3.0em;
font-weight: bold;
text-align: center;
color: #fff;
}
#box1{top:100px;left:100px; z-index:3;}
#box2{top:200px;left:200px; z-index:2;}
#box3{top:300px;left:300px; z-index:1;}
/*z-index 숫자가 큰 요소가 위로 보인다.*/
</style>
</head>
<body>
<div id="wrap">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>
</html>
아래 그림처럼 이 순서를 바꾸고 싶을 때는 z-index 속성을 부여하며,
z-index 속성은 큰 값일수록 브라우저의 위에 위치하게 된다.
#box1{top:100px;left:100px; z-index:3;}
#box2{top:200px;left:200px; z-index:9999;}
#box3{top:300px;left:300px; z-index:1;}
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| html5를 활용한 기초 레이아웃 (0) | 2021.01.29 |
|---|---|
| position 속성 2 - 활용 (0) | 2021.01.27 |
| float 속성 3 - 레이아웃 연습 1~5 (0) | 2021.01.27 |
| float 속성 2 - 박스정리 (0) | 2021.01.27 |
| float속성 1 (0) | 2021.01.26 |
