relative:
-> 레이아웃은 그대로, 내용만 위치바꿀수있긴해.... 절대절대 사용 XXXXX
-> 위치 변경하려고 사용하는게 아님!
-> absolute의 부모로서 사용하게 된다.
<!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>
#left{
position: relative;
left: 50px;
/* relative:
-> 레이아웃은 그대로, 내용만 위치바꿀수있긴해.... 절대절대 사용 XXXXX
-> 위치 변경하려고 사용하는게 아님!
-> absolute의 부모로서 사용하게 된다.
*/
/* margin-left: 3em; */
}
#text{
left: 0%;
top: 0%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="left" class="col bg-secondary">
하이
</div>
<div class="col bg-danger">
반가웡
</div>
</div>
<div class="row bg-primary">
sdfds
</div>
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<div class="row">
<div class="col position-relative">
<img src="./Downloads/로고.png" style="height: 10em;" alt="">
<span id="text" class="position-absolute">
안녕
</span>
</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 - fixed, sticky (1) | 2023.10.11 |
|---|---|
| Wep page Self2 - 당근2 (0) | 2023.10.11 |
| Wep page Self2 - 당근1 (0) | 2023.10.11 |
