Position
position 속성은 웹 문서 안 요소의 위치를 정하는 속성이다.
position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있다.
- Relative
static(기본값)이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 상대적 위치는 top, right, bottom, left 속성을 사용한다.
ex) relative
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin : 10px;
display: inline-block;
width: 300px;
height: 100px;
border: 3px solid black;
}
.box {
background: blue;
position: relative;
top: 10px;
left: 100px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>-> 파란색 박스가 원래 static 위치를 기준으로 위에서 10px, 왼쪽에서 100px 떨어진다.
- Absolute
absolute 속성값은 브라우저가 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값이다
이때 기준위치는 가장 가까운 부모 요소의 position속성이다. relative인 요소이다
ex) absolute
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
display: inline-block;
border: 3px solid black;
}
.container {
margin: 40px;
width: 800px;
height: 1000px;
}
.box {
width: 100px;
height: 100px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>-> box는 position: absolute이기 때문에 왼쪽 상단 기준(부모요소 container) 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는 모습을 볼 수 있다.
- Fixed
fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정한다. 브라우저 창이 기준 위치가 된다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정! (기준점: 브라우저 왼쪽 상단)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet"
type="text/css" />
<style>
header{
position: fixed;
left: 0;
right: 0;
top: 0;
height: 48px;
background-color: rgba(45,45,45,0.95);
}
</style>
</head>
<body>
<header>
</header>
</body>
</html>-> left, right, top : 0 으로 기준을 잡아 width : 100% 와같은 효과를 주고, 상단에 고정했다.
IT공부중입니다!