#3.12 Fixed이전 포스트/코코아 html css2020. 12. 7. 20:33
Table of Contents
position:fixed를 하면 초기에 생성된 위치에서 요소가 고정된다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 1000vh;
}
div {
height: 150px;
width: 150px;
}
.wheat-color {
background-color: wheat;
}
.diff {
position: fixed;
background-color: teal;
}
</style>
</head>
<body>
<div class="wheat-color"></div>
<div class="diff"></div>
</body>
</html>
스크롤을 내려도 스크롤을 아무리 내려도 박스가 그위치에 고정되어 있다.
만약 top: 5px같이 fixed를 한상태에서 위치를 수정하면 초기에 그위치에가고 다른 요소가 있어도 덮어쓴다.
그러니깐 위치를 수정하면 전혀 다른레이어가 되어 모든레이어중 제일 위로 간다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 1000vh;
}
div {
height: 150px;
width: 150px;
}
.wheat-color {
background-color: wheat;
}
.diff {
position: fixed;
top: 5px;
background-color: teal;
}
</style>
</head>
<body>
<div class="wheat-color"></div>
<div class="diff"></div>
</body>
</html>
'이전 포스트 > 코코아 html css' 카테고리의 다른 글
| #3.14 Pseudo Selectors part One (0) | 2020.12.10 |
|---|---|
| #3.13 Relative Absolute (0) | 2020.12.10 |
| #3.11 Flexbox Part Two (0) | 2020.12.07 |
| #3.10 Flexbox Part One (0) | 2020.12.07 |
| #3.9 Inline Block (0) | 2020.12.06 |
@병고라니 :: 컴퓨터공학과 고인물
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!