JAVA/HTML
[HTML-id1]position, static 고정 relative, 자식이 absoulte면 부모는 무조건 relative
java나유
2022. 7. 16. 00:41
- 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