HTML문서에서 쓰이는 CSS 속성중 position 이라는 속성이 있습니다.
이 position 속성에서 자주 쓰이는 속성들은 대표적으로 fixed, relative, absolute 가 있습니다.
static 속성이있는데 이것은 디폴트 값이라고 생각하시면 됩니다.
아 그리고 body 태그는 기본값으로 position : relative 값을 가지고 있습니다.
이번 포스트 에서는 fixed 에 대하여 먼저 포스팅 하려고 합니다.
fixed는 position : fixed 값을 가지고있는 엘리먼트를 웹에 고정시킵니다.
그리고 이 속성값을 줌으로써 top, left, right, bottom 속성을 이용할 수 있습니다.
우선, 사진으로 봅니다.
아래는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
#red {
width: 300px;
height: 300px;
background-color: red;
}
#blue {
position: fixed;
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
</body>
</html>fixed 태그는 적용된 위치부터 고정되어 움직입니다. 만약 red태그에 fixed를 주었다면, 처음엔 blue박스를 가리게되고, 휠을 내리면 red박스가 따라서 내려왔을것입니다.
이 정도면 fixed 속성이 대충 어떤 역할을 하는지 알 수 있을것 같습니다.
'프로그래밍 > HTML&CSS' 카테고리의 다른 글
| CSS states MDN (0) | 2020.12.06 |
|---|---|
| [HTML & CSS] position : relative , absolute (0) | 2020.11.08 |
| [HTML&CSS]Flex box (0) | 2020.11.04 |
| HTML & CSS Class 와 id (0) | 2020.10.18 |
| 블럭과 인라인 (0) | 2020.10.18 |