728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
postion : static > postion을 지정하지 않았을때 기본값. top, right, lefr, bottom을 무시
postion : relative > postion이 static이었을때 위치를 기준으로 움직임
postion : abolute > postion이 static이 아닌 가장 가까운 부모/선조를 기준으로 움직인다.
postion : fixed > 스크롤에 구애받지 않고 위치를 사수한다.
*/
body > div {
width: 31.25px;
height: 30.25px;
background-color: darkcyan;
}
body > div > div {
position: relative;
width: 30px;
height: 30px;
background-color: cornflowerblue;
}
#div1 {
position: absolute;
left: 30px;
top: 30px;
width: 50%;
height: 50%;
background-color: darkseagreen;
}
#div2 {
position: relative;
right: 10px;
bottom: 10px;
border-radius: 50%;
width: 50%;
height: 50%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<div>
<div id="div1"></div>
<div id="div2"></div>
</div>
</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| background예제 2 (0) | 2022.12.28 |
|---|---|
| background와 vw,vh (1) | 2022.12.28 |
| Position예제 (0) | 2022.12.28 |
| float예제2 (0) | 2022.12.28 |
| float예제1 (0) | 2022.12.28 |