반응형
position relative 사용하기
기본 코딩
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>
(body: div안에 div 만들기)
결과
여기서 초록색 div를 아주 조금만 옮겨보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
position: relative;
top: -10px;
left: -10px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>
position을 relative로 하면
top, bottom, left, right 속성을 사용할 수 있다.
top, bottom, left, right 등을 쓰면
처음 초록색 div(엘리먼트)가 놓은 자리에서 상하좌우로 움직임.
--> 위 코딩에서는 top: -10px;, left: -10px; 을 입력하기 전의 초록색 div 박스 위치에서 위로 -10, 왼쪽으로 -10으로 옮겨진 것이다.
결과
우와~~~ 초록색 div 가 쬐끔 움직였잖아~? 완전 럭키비키잖아~~?????
반응형
'2. CSS' 카테고리의 다른 글
| CSS pseudo selectors / first-child & last-child (0) | 2024.11.27 |
|---|---|
| CSS position absolute 사용해서 div 박스 옮기기 이동 (0) | 2024.11.26 |
| CSS position fixed 사용하기 2 (0) | 2024.11.24 |
| CSS position fixed 사용하기 (0) | 2024.11.24 |
| CSS flex-wrap 사용하기 (0) | 2024.11.19 |