1. fixed :
-> left, top으로 위치조절
-> container 밖으로 빼내는게 일반적
-> 광고 / modal에서 쓰인다 팝업창 띄우는거 있잖아
-> box가 container위에 달려있어서, container의 내용을 가려버린다
-> 내가 쓸일은 거의 없을거임
position: fixed;
left: 0%;
top: 0%;
2. sticky :
-> top으로 위치조절
-> container내용에 영향을 안줌
-> z-index에 따라서 맨앞으로 이동 가능
position: sticky;
top: 100%;
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
/*
1. fixed :
-> left, top으로 위치조절
-> container 밖으로 빼내는게 일반적
-> 광고 / modal에서 쓰인다 팝업창 띄우는거 있잖아
-> box가 container위에 달려있어서, container의 내용을 가려버린다
-> 내가 쓸일은 거의 없을거임
position: fixed;
left: 0%;
top: 0%;
*/
/*
2. sticky :
-> top으로 위치조절
-> container내용에 영향을 안줌
-> z-index에 따라서 맨앞으로 이동 가능
position: sticky;
top: 100%;
*/
</style>
</head>
<body>
<div class="container">
<div id="top" class="row">
<div class="col" style="height: 3em; background-color: tomato;">
상단
</div>
</div>
<div class="row">
<div class="col-3" style="height: 150em; background-color: aqua;">
중1
</div>
<div class="col" style="background-color: aquamarine;">
중2
</div>
</div>
<div class="row">
<div class="col" style="height: 8em; background-color: burlywood; ">
하단
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>'HTML > DAY 33 _ 23.10.10' 카테고리의 다른 글
| Position - relative (0) | 2023.10.11 |
|---|---|
| Wep page Self2 - 당근2 (0) | 2023.10.11 |
| Wep page Self2 - 당근1 (0) | 2023.10.11 |
