Position?
position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.
position 속성 사용법
- static
static은 position 속성의 기본값이며, top, bottom, left, right 속성을 넣더라도 적용되지 않는다.
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.static{position:static; width:100px; height:100px}
.static:nth-child(1){background:skyblue}
.static:nth-child(2){background:hotpink; left:100px}
.static:nth-child(3){background:yellow}
</style>
</head>
<body>
<div class="static"></div>
<div class="static"></div>
<div class="static"></div>
</body>
</html> <!--코드를 직접 넣어서 웹페이지에 어떻게 표시되는지 확인해 보자!-->- relative
relative 속성은 static의 원래 위치부터 계산한다.
위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정할 수도 있다.
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.relative1{width:300px; height:200px; background:green; position:static}
.relative2{width:300px; height:200px; background:hotpink; top:20px; left:100px; position:relative}
</style>
</head>
<body>
<div class="relative1">relative1</div>
<div class="relative2">relative2</div>
</body>
</html> <!--코드를 직접 넣어서 웹페이지에 어떻게 표시되는지 확인해 보자!-->- absolute
absolute는 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.absolute{position:absolute; width:100px; height:100px}
.absolute:nth-child(1){background:skyblue; left:100px}
.absolute:nth-child(2){background:hotpink; top:110px; left:210px}
.absolute:nth-child(3){background:yellow; top:220px; left:320px}
</style>
</head>
<body>
<div class="absolute"></div>
<div class="absolute"></div>
<div class="absolute"></div>
</body>
</html> <!--코드를 직접 넣어서 웹페이지에 어떻게 표시되는지 확인해 보자!-->- fixed
fixed 속성은 브라우저 화면의 상대 위치이다. 따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.fixed{width:300px; height:200px; background:green; top:0px; left:0px; position:fixed}
.relative1{width:300px; height:200px; background:hotpink; top:1000px; left:100px; position:relative}
</style>
</head>
<body>
<div class="fixed">fixed</div>
<div class="relative1">relative1</div>
</body>
</html> <!--코드를 직접 넣어서 웹페이지에 어떻게 표시되는지 확인해 보자!-->마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 됩니다.
right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻입니다.
