position 속성: 박스의 위치를 지정하는 스타일 속성이다.
★position 속성을 지정하면 블록형 박스의 너비값의 기본값이 '0'이 된다. 따라서 반드시 width 속성으로 너비값을 지정해야한다.
속성값
1. relative:
상대 위치를 지정, 위치 지정 속성을 잘 쓰지 않는다.
※부모 요소에 사용한다.
2. absolute:
절재 위치를 지정, 위치 지정 속성을 반드시 사용한다.
※자식 요소에 사용한다.
※자식 요소가 여러 개일 경우 자식 요소들이 겹친다.
3. fixed:
고정 위치를 지정, 위치 지정 속성을 반드시 사용한다.
※박스 요소가 부유한다.
★위치 지정 속성: left, top, right, bottom(단위: px, %)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>위치속성</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
.box1 {/*브라우저 크기가 바뀌면 여백의 크기도 바뀐다. 브라우저 해상도가 바뀌면 위치가 바뀐다.*/
/*
position:absolute; left:50%; top:50%;
width:500px; height:350px; margin:-175px 0 0 -250px;
background:orange;
*/
position:absolute; left:300px; top:150px;
width:500px; height:350px;
background:orange;
}
.pbox {
position:relative;
width:400px; height:300px; margin:200px 0 0 100px;
background:skyblue;
}
.cbox1 {
position:absolute; left:100px; top:50px;
width:200px; height:150px;
background:brown;
}
.pcontainer {
display:flex;
justify-content:left; /*아이템 수평 정렬 지정*/
align-items:center; /*아이템 수직 정렬 지정*/
}
.container {
position:relative;
width:400px; height:450px; margin:100px 50px;
border:1px solid #06F; border-radius:5px;
cursor:pointer; /*마우스 오버 했을 때 마우스 포인터가 손가락 모양으로 나온다*/
}
.container h3 {
position:absolute; top:10px;
width:100%;
font-size:24px; color:#36F;
text-align:center; text-transform:uppercase;
}
.container img {
position:absolute; top:50px;
width:100%;
}
.container p {
position:absolute; left:15px; right:15px; top:330px;
}
.container:hover h3 {top:15px; color:blueviolet;}
.container:hover img {top:70px; opacity:0.5;}
.container:hover p {top:250px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="pbox">
<div class="cbox1"></div>
</div>
<div class="pcontainer">
<div class="container">
<h3>hero batman</h3>
<img src="imgs/batman.jpg" alt="batman">
<p>
꽃이 산야에 대중을 방황하였으며, 아름다우냐? 대고, 이상은 아름답고 만천하의 것은 생생하며, 긴지라 같이, 속에서 철환하였는가? 같은 현저하게 피가 이상은 무엇이 더운지라 운다.
</p>
</div>
<div class="container">
<h3>hero batman</h3>
<img src="imgs/batman.jpg" alt="batman">
<p>
꽃이 산야에 대중을 방황하였으며, 아름다우냐? 대고, 이상은 아름답고 만천하의 것은 생생하며, 긴지라 같이, 속에서 철환하였는가? 같은 현저하게 피가 이상은 무엇이 더운지라 운다.
</p>
</div>
</div>
</body>
</html>
결과
