Position
HTML 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다.
Position 속성은 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용된다.
static(기본) : viewport의 순서대로 박스를 연결
relative : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로 현재 박스 위치 지정
(상대위치)
absolute : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로 현재박스 위치를 지정
(절대위치)
--> 상위태그 위치를 기준으로 지정(상위태그가 없다면 상단좌측 고정)
fixed : 뷰포트(viewport)를 기준으로 위치를 설정
Relative
요소를 일반적인 문서 흐름에 따라 배치한다.
요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.
- 원래 위치를 기준으로 top, bottom, left, right에서 얼만큼 떨어질 지 결정한다.
- 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
- 원래 위치가 그대로 유지가 된다.
Absolute
요소를 일반적인 문서 흐름에서 제거한다.
가장 가까운 부모 태그에 있는 요소를 기준으로 배치한다.
- 조상 요소 위치를 기준으로 top, bottom, left, right에서 얼마만큼 떨어질 지 결정한다.
- 조상 중 Position을 가진 요소가 없다면 <body> 요소를 기준으로 삼는다.(static 제외 값)
relative는 absolute를 쓸 때 영역을 잡아주는 역할을 하고
absolute는 left,top,right,bottom 값으로 전 화면을 아무런 제약 없이 쓸 수 있는 것이다.
relative를 부모라 하고, absolute를 그 부모의 자손이라 했을 때,
absolute가 아무렇게나 돌아다니지 못하게 부모인 relative가 absolute를 움직일 수 있는 영역을 제한 하는 것이다.
-- relative를 이용해 div박스 이동해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
position : 박스 위치 지정
static(기본) : viewport의 순서대로 박스를 연결
relative : 특정 HTML요소를 기본위치로 잡고
그 위치를 기준으로 현재 박스 위치 지정(상대위치)
absolute : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로
현재박스 위치를 지정(절대위치)
fixed : 뷰포트(viewport)를 기준으로 위치를 설정
-->
<style>
div{border:1px solid gray;}
#container1 {width:500px; height:500px; border:4px solid gray;}
#container2 {width:300px; height:300px; border:3px solid orange;}
#container3 {width:200px; height:200px; border:2px solid green;}
#container1 {
position: relative;
left:30%;
top:100px;
}
#b1{
position: relative;
left:10px;
top:10px;
}
#b2{
position: relative;
left:-150px;
top:-100px;
}
#b3{
position: relative;
left:100px;
top:10px;
}
#container2{
position: relative;
left:50px;
top:50px;
}
#b4{}
#b5{}
#b6{
height: 60px;
}
#container3{
position: relative;
left:50px;
top:50px;
}
#b7{}
#b8{}
#b9{}
</style>
<div id="container1">
<div id="b1">BOX1</div>
<div id="b2">BOX2</div>
<div id="b3">BOX3</div>
<div id="container2">
<div id="b4">BOX4</div>
<div id="b5">BOX5</div>
<div id="b6">BOX6</div>
<div id="container3">
<div id="b7">BOX7</div>
<div id="b8">BOX8</div>
<div id="b9">BOX9</div>
</div>
</div>
</div>
</body>
</html>-- absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body{
margin: 0px;
}
div{
width:150px;
height:100px;
border :4px solid gray;
}
#b1{
position: absolute;
left:20px;
top:20px;
}
#b2{
position: absolute;
left: 30%;
top:30%;
}
#b3{
position: absolute;
left:500px;
}
#b4{
position: absolute;
}
</style>
<div id="b1">1</div>
<div id="b2">2</div>
<div id="b3">3</div>
<div id="b4">4</div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| [CSS] Selector (0) | 2022.06.02 |
|---|---|
| [CSS] Flexbox (0) | 2022.05.21 |