[CSS] - position : static, relative, absolute, fixed

CSS

Riucc 2018. 9. 13. 14:54

○ position : static, relative, absolute, fixed

1. static(position을 주지 않았을 때, 지정된 위치에 있는 상태, default, 정적 배치)

2. relative(상대 배치, 상대는 고정하고 나만 움직이는 상태)

3. absolute(절대 배치, 무조건 0, 0에서 시작하며,

부모가 relative일 경우 거기 좌표부터 시작)

4. 부모는 relative, 자식은 absolute

5. fixed(고정 배치, 광고 사용, 스크롤바 내려도 위치 고정, 고정 메뉴 사용)

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin:0;

padding:0;

}

#parent {

width:280px;

height:210px;

border:solid 5px #000000; /* 테두리 설정 */

margin:50px 0 0 50px; /* 시계방향 위 오른 아래 왼 */

}

#box1, #box2, #box3 {

width:70px;

height:70px;

}

#box1 { background-color:#ff0000; } /* id 는 #아이디명으로 제어 */

#box2 { background-color:#00ff00; }

#box3 { background-color:#ffff00; }

#parent {

position:relative;

}

#box2 {

position:absolute;

top:20px;

left:30px;

}

</style>

</head>

<body>

</div>

</body>

</html>