- position:오브젝트 성격 변화
- static 고정 relative(중간형태 margin, top, left, right, bottom)
- absolute(자유분방)
- 자식이 absoulte일 경우 부모는 무조건 relative로 세팅
index1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 3일차 HTML 4.0 7/11</title>
<style>
body{margin:0; padding:0;}
div{width:100px; height:100px;}
.a{background-color:orange; position:static;}
.b{background-color:green; position:relative; left:100%; margin-left:-100px;}
.c{background-color:gray;}
.d{background-color:black; position: absolute; right:0px;}
/*
position: 오브제트 성격 변화 할 때
static(고정) relative(중간형태 margin,top,left,right,bottom)
absolute(자유분방함)
*/
.popup{width:600px; height:600px; background-color:yellowgreen;
display: block; position:relative;margin-right:5px; }
.close{width:50px;height:50px;background-color:black;
position:absolute; left:100%; color:white; font-size:25px;
font-weight:bold; text-align:center; line-height:50px;
/* 자식이 absolute일 경우 부모는 무조건 relative로 세팅해야함 */
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<span class="popup" id="popup">
<div class="close" onclick="abc()">X</div>
</span>
</body>
<script>
function abc(){
document.getElementById("popup").style.display="none";
}
</script>
</html>
728x90
'JAVA > HTML' 카테고리의 다른 글
| [HTML-id3]overflow:hidden 이미지 틀안에 숨기기, (0) | 2022.07.16 |
|---|---|
| [HTML-id2]border-radius: 왼쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽하단 (0) | 2022.07.16 |
| [HTML] radio 태그 name 있어야함 input type:"text" "password" "checkbos" (0) | 2022.07.13 |
| [HTML] colspan, border 테두리 가로 병합 (0) | 2022.07.13 |
| [HTML] 퍼블리싱 작업 순서 (0) | 2022.07.11 |
댓글