CSS position 속성 질문
-
게시물 수정 , 삭제는 로그인 필요
CSS position의 relative, absolute 관련해서 질문드립니다.
우선 HTML이랑 CSS 코드부터 보여드리겠습니다.
HTML-----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="\practice\CSS\08_4.css">
</head>
<body>
<p> CSS </p>
<div id="contents">
<h1> CSS3 </h1>
<p> CSS </p>
</div>
<div>
<h2 id="static"> static </h2>
<h2 id="absolute"> absolute </h2>
</div>
</body>
</html>
CSS----------------
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 2px solid black;
}
#contents {
background: url("/practice/*******.png") no-repeat;
background-size: cover;
width: 800px;
height: 500px;
margin: 0 auto;
}
p {
position: absolute;
}
h1 {
color: #fff;
font-size: 120px;
text-shadow: 2px 3px 0 #000;
position: absolute;
/* right: 100px;
bottom: 100px; */
}
/* div.relative {
position: relative;
} */
#static {
width: 150px;
height: 150px;
margin: 0 500px;
border: 5px solid blue;
background-color: grey;
position: relative;
}
#absolute {
width: 150px;
height: 150px;
/* margin: 0 auto; */
border: 5px solid blue;
position: absolute;
left: 50px;
bottom: 50px;
}
/* Q: 왜 absolute의 부모요소가 static이 아닌 div.relative인가? */
인데 출력화면을 보시면,
저렇게 absolute 사각형이 static(position: relative) 사각형을 기준으로 움직이는게 아니라 전체 화면을 기준으로 움직이고 있습니다. absolute속성이 제가 알기로 바로 위에 있는 부모 속성을 기준으로 움직인다고 알고 있는데 여기서는 relative 속성을 가진 static 사각형을 기준으로 움직여야 하는거 아닌가요?
왜 그런거죠?
CSS position의 relative, absolute 관련해서 질문드립니다. 우선 HTML이랑 CSS 코드부터 보여드리겠습니다.
HTML-----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="\practice\CSS\08_4.css">
</head>
<body>
<p> CSS </p>
<div id="contents">
<h1> CSS3 </h1>
<p> CSS </p>
</div>
<div>
<h2 id="static"> static </h2>
<h2 id="absolute"> absolute </h2>
</div>
</body>
</html>
CSS----------------
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 2px solid black;
}
#contents {
background: url("/practice/*******.png") no-repeat;
background-size: cover;
width: 800px;
height: 500px;
margin: 0 auto;
}
p {
position: absolute;
}
h1 {
color: #fff;
font-size: 120px;
text-shadow: 2px 3px 0 #000;
position: absolute;
/* right: 100px;
bottom: 100px; */
}
/* div.relative {
position: relative;
} */
#static {
width: 150px;
height: 150px;
margin: 0 500px;
border: 5px solid blue;
background-color: grey;
position: relative;
}
#absolute {
width: 150px;
height: 150px;
/* margin: 0 auto; */
border: 5px solid blue;
position: absolute;
left: 50px;
bottom: 50px;
}
/* Q: 왜 absolute의 부모요소가 static이 아닌 div.relative인가? */
인데 출력화면을 보시면,
저렇게 absolute 사각형이 static(position: relative) 사각형을 기준으로 움직이는게 아니라 전체 화면을 기준으로 움직이고 있습니다. absolute속성이 제가 알기로 바로 위에 있는 부모 속성을 기준으로 움직인다고 알고 있는데 여기서는 relative 속성을 가진 static 사각형을 기준으로 움직여야 하는거 아닌가요?
왜 그런거죠?
#css position #css position absolute #css position relative #css position sticky #css position 속성 #css position fixed #css position absolute 가운데 #css position static #css position 종류 #css position default
