📝 CSS
🖥️ 1. 포지션
1-1. 포지션이란
static / relative / absolute / fixed
1-2. static
- 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정할 수 없다.
1-3. relative
1-4. absolute
- 설정 시 가로 크기가 100%가 되는 block 태그의 특징이 사라진다.
1-5. fixed
- 스크롤과 상관 없이 문서 최좌측상단을 기준으로 좌표를 고정
- 설정 시 가로 크기가 100%가 되는 block 태그의 특징
📝 예제
EX1)
<head>
...
<style>
html{ border: 1px solid gray; }
div{
border: 5px solid tomato;
margin: 10px;
}
#me{
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
EX2)
<head>
...
<style>
#parent, #other, #grand{
border: 5px solid tomato;
}
#grand{ position: relative; }
#me{
background-color: black;
color: white;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="grand">
grand
<div id="parent">
parent
<div id="me">me</div>
</div>
</div>
</body>
EX3)
<head>
...
<style>
body{ padding-top: 30px; }
#parent, #other{ border: 5px solid tomato; }
#me{
background-color: black;
color: white;
position: fixed;
left: 0;
top: 0;
height: 30px;
width: 100%;
text-align: center;
}
#large{
height: 10000px;
background-color: tomato;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">large</div>
</body>
