I want to move something just a little bit to the top or left.
<head>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
}
#blue {
background-color: royalblue;
}
#pink {
width: 100px;
height: 100px;
background-color: thistle;
}
</style>
</head>
<body>
<div id="blue">
<div id="pink"></div>
</div>
</body>
#pink {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: thistle;
}
position: relative -> the pink div move according to the blue div.
#pink {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: thistle;
}
position: absolute -> the pink div move according to the body.
If you don't want to move according to the body, you can change father of the absolute div to position-relative.
#pink {
position: relative;
top: 20px;
right: 0px;
width: 100px;
height: 100px;
background-color: thistle;
}
#pink {
position: absolute;
top: 20px;
right: 0px;
width: 100px;
height: 100px;
background-color: thistle;
}
#blue {
background-color: royalblue;
position: relative;
}
#pink {
position: absolute;
top: 20px;
right: 0px;
width: 100px;
height: 100px;
background-color: thistle;
}
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: combinators (0) | 2021.05.04 |
|---|---|
| KokoaTalk clone coding: pseudo selector 1 (0) | 2021.05.04 |
| KokoaTalk Clone Coding: fixed (0) | 2021.05.04 |
| KokoaTalk Clone Coding: flex box 3 (0) | 2021.05.03 |
| KokoaTalk Clone Coding: flex box 2 (0) | 2021.05.03 |
