position : 위치속성
position은 위치를 설정할 때 사용하는 속성.
위치 속성에는 절대좌표와 상대좌표라는 개념이 있다.
절대 좌표는 0점을 기준으로 움직이는 좌표를 말하며 상대 좌표는 태그가 출력된
위치를 기준으로 움직인다.
[속성값]
- static
: 태그가 출력된 기본값. position속성을 적용하지 않은 것과 같으며 좌표를 인식할 수 없다.
block속성의 경우 태그가 위에서 아래로 출력된 기본 상태를 말함.
- relative
: 상대좌표를 말함. block속성의 태그가 출력된 현재 위치에서 left나 top방향으로 이동함.
absolute로 움직일 자식박스의 부모박스에 보통 적용함.
-absolute
: 절대좌표를 의미함.
부모박스(부모박스가 없으면 브라우저)의 가장 왼쪽 상단 0점을 기준으로
top, left, right, bottom 방향으로 이동할 수 있다.
relative가 적용된 부모박스 안에 자식박스에게 적용하는 속성.
-fixed
: 절대 좌표를 의미함. 브라우저 화면을 기준으로 top, left, right, bottom 방향으로 이동할 수 있다.
**position을 적용하면 위치를 옮기기 위해 반드시 좌표를 함께 입력해 주어야 한다.
각각의 좌표는 아래와 같이 사용함.
-left
: 브라우저 또는 부모박스를 기준으로 왼쪽에서 오른쪽으로 이동하는 값.(양수)
음수일 경우 기준점에서 왼쪽으로 이동함.
- right
: 브라우저 또는 부모박스를 기준으로 오른쪽에서 왼쪽쪽으로 이동하는 값.(양수)
음수일 경우 기준점에서 오른쪽으로 이동함.
- top
: 브라우저 또는 부모박스를 기준으로 위에서 아래로 이동하는 값.(양수)
음수일 경우 기준점 위로 이동함.
- bottom
: 브라우저 또는 부모박스를 기준으로 아래에서 위쪽으로 이동하는 값.(양수)
음수일 경우 기준점 아래로 이동함.<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
position: relative;
/* 상대좌표. 각 박스의 왼쪽상단 모서리가 기준점. 좌표 인식 가능 */
/* relative - top과 left만 인식. */
box-sizing: border-box;
border: 5px solid rgba(255, 140, 0, 0.3);
background-color: bisque;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
position: relative;
/* 상대좌표. 각 박스의 왼쪽상단 모서리가 기준점. 좌표 인식 가능 */
/* relative - top과 left만 인식. */
box-sizing: border-box;
border: 5px solid rgba(255, 140, 0, 0.3);
background-color: bisque;
font-size: 20px;
}
.box1 {
top: 40px; /*좌표 인식 가능*/
left: 200px;
}
.box2 {
position: static;
/* position: static; => 좌표를 인식하지 않는다. */
/* position을 적용하지 않은 것과 같은 기본값으로 좌표인식 X */
left: 400px; /*좌표를 인식하지 못함.*/
top: 50px; /*좌표를 인식하지 못함.*/
}
.box3 {
left: 50%;
top: 300px;
}
</style>
<!-- css -->
<style>
div {
width: 200px;
height: 200px;
box-sizing: border-box;
border: 5px solid lightsalmon;
background-color: rgba(255, 140, 0, 0.3);
font-size: 20px;
}
.box1 {
position: absolute;
top: 100px;
left: 100px;
}
.box2 {
position: absolute;
top: 150px;
left: 150px;
}
.box3 {
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<style>
div {
width: 200px;
height: 200px;
box-sizing: border-box;
border: 5px solid lightsalmon;
background-color: rgba(255, 140, 0, 0.3);
font-size: 20px;
}
.box1 {
position: absolute;
top: 100px;
left: 100px;
}
.box2 {
position: absolute;
top: 150px;
left: 150px;
}
.box3 {
position: fixed;
right: 40px;
bottom: 40px;
width: 150px;
height: 150px;
border-radius: 100%;
}
.parent {
width: 500px;
height: 500px;
background-color: lightcyan;
margin: 0 auto;
margin-top: 1000px;
position: relative;
}
.child {
position: absolute;
right: 0;
bottom: 0;
}
body {
height: 5000px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<section class="parent">
<div class="child">child</div>
</section>
스크롤바로 화면을 위아래로 이동해도 box3(position: fixed)은 제자리에 위치한다.
웹디자인 스케치