CSS3 - CSS position 속성 static, fixed, absolute, relative 정리
position
개요
객체를 위치시킬 때 사용하는 속성
상속되지 않음
사용법
position: absolute | fixed | static(default) | relative
■ absolute : 절대값; 해당 태그를 감싸는 상단 태그가 기준, 스크롤하면 움직임
■ fixed : 화면상에 고정, 스크롤해도 움직이지 않음
■ static : default
■ relative : 원래 내가 있어야 할 자리에서 이동
예제)
전체 코드
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width:200px; height:200px;
opacity:0.7;
}
div:nth-child(1) {
background-color:#ff0000;
position:fixed;
top:0;
left:0;
}
div:nth-child(2) {
background-color:#00ff00;
position:absolute;
top:200px;
left:200px;
}
div:nth-child(3) {
background-color:#0000ff;
position:absolute;
top:100px;
left:100px;
}
#wrap {
width:300px; height:300px;
position:fixed;
top:500px; left:500px;
background-color:yellow;
opacity:1.0;
}
#wrap .content {
width:100px; height:100px;
position:absolute;
top:100px; left:100px;
background-color:red;
opacity:1.0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div id="wrap">
<div class="content"></div>
</div>
</body>
</html>
설명 전에 위 그림과 영상을 보고 생각해 보세요
(영상 파란색과 초록색이 바뀐 이유는... 색 조정을 다시하고 영상을 만들었기 때문입니다..)
그럼 간략히..
fixed
현재 화면을 기준으로 고정된 값입니다.
브라우저 왼쪽 상단 모서리가 기준입니다.
스크롤을 내려도 고정되어 있습니다.
absolute
절대값
해당 태그를 감싸는 상단 태그가 기준 -> 노란색 box안에 빨간색 box가 저 위치에 있는 이유
스크롤하면 움직임
relative
원래 내가 있어야 할 자리가 기준
ex)
전체 코드
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#red {
width:100px; height:100px;
background-color:red;
}
#yellow {
width:100px; height:100px;
background-color:yellow;
position:relative;
top:100px; left:100px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
</body>
</html>
<div>태그로 인해 원래 있어야 할 자리가 ①이지만
position:relative; top:100px; left:100px; 속성을 주어 기준 지점에서 위치를 지정
absolute 와 relative
전체 코드
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#contain {
width:300px;
margin:0 auto;
border:1px solid #cccccc;
}
#header {
height:50px;
background-color:#cccccc;
}
#wrap {
height:200px;
position:relative;
}
#content1 {
width:100px; height:100px;
background-color:red;
border:2px dashed green;
position:absolute;
top:10px; left:10px;
z-index:20;
}
#content2 {
width:100px; height:100px;
background-color:yellow;
border:2px dashed green;
position:absolute;
top:50px; left:50px;
z-index:10;
}
#footer {
height:50px;
background-color:#cccccc;
}
</style>
</head>
<body>
<div id="contain">
<div id="header">HEADER</div>
<div id="wrap">
<div id="content1">content1</div>
<div id="content2">content2</div>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
id wrap 으로 감싼 content1 태그와 content2 태그가 absolute 속성을 가지고 wrap 안에 위치하기 위해선
감싼 태그인 wrap 태그에 position:relative 속성을 주어야 한다.
wrap 태그에 position:relative; 속성을 주지 않을 경우 아래와 같다.
'IT > Web' 카테고리의 다른 글
| HTML5 - 웹페이지 구조 만들기 (0) | 2019.07.12 |
|---|---|
| CSS3 - CSS float 속성 (0) | 2019.07.12 |
| CSS3 - CSS 글자 관련 속성 font, text (0) | 2019.07.11 |
| CSS3 - CSS box-sizing, border, background-image 속성 (0) | 2019.07.11 |
| CSS3 - CSS margin padding 속성 (0) | 2019.07.10 |
댓글