728x90
<!DOCTYPE html>
<html>
<head>
<title>Position Property Lab</title>
<style>
/* Write your CSS here */
#container {
width: 300px;
height: 300px;
}
.box{
width: 50px;
height: 50px;
}
#static-box{
background-color: blue;
}
#relative-box {
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
#absolute-box {
background-color: red;
position: absolute;
top: 220px;
left: 20px;
}
</style>
</head>
<body>
<div id="container">
<!-- Create and style your divs here -->
<div id="static-box" class="box" >
</div>
<div id="relative-box" class="box">
</div>
<div id="absolute-box" class="box">
</div>
</div>
</body>
</html>
https://recordoftheday.tistory.com/entry/CSS-Position%EC%9C%84%EC%B9%98-%ED%8A%B9%EC%84%B1
[CSS] Position Property(위치 속성)
위치 특성 위치 특성은 문서 내에서 요소의 위치를 설정하는 것이다. 중요한 점은 이 특성이 설정한 위치에 따라서 4개의 다른 특성인 top, right, bottom, left이 결정된다는 것이다. 위치 특성으로 사
recordoftheday.tistory.com
https://codedamn.com/challenge/30-days-of-html-css
30 Days of HTML CSS - Codedamn
Level up your coding skills with a daily coding challenge. Compete and share your progress every day and become a better developer.
codedamn.com
728x90
'30Days of HTML CSS' 카테고리의 다른 글
| [30Days of HTML CSS] Day 06 | Text-Overflow Property Lab (0) | 2023.11.22 |
|---|---|
| [30Days of HTML CSS] Day 05 | Figure Tag Lab (0) | 2023.11.21 |
| [30Days of HTML CSS] Day 03 | CSS Shapes Lab (0) | 2023.11.20 |
| [30Days of HTML CSS] Day 02 | Input Types Lab (0) | 2023.11.20 |
| [30 Days of HTML CSS] Day 01 | Semantic HTML Structure (0) | 2023.11.17 |