컨테이너 안에서 자유롭게 위치 잡기
html 의 트리구조에서 아버지 관계의 엘리먼트는 자식들을 담고 있기 때문에 컨테이너 역할을 합니다 .
예로
<div>
<p></p>
<img src=""/>
</div>
div 엘리먼트는 p와 img를 담고있는 컨테이너 이다
컨테이너를 이동하면 그안에 엘리먼트들도 이동전 콘테이너에서 있던 위치와 같은 위치를 유지하면서 같이 이동한다
해당 pic1을 붙잡아서 pic 2로 옴길수도있다 해당 엘리먼트가 absolute로 설정되있다면 이동 시킬수 있다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 시작</title>
<style type ="text/css">
*{
margin:0px;
padding:0px;
}
#container{
position:relative;
height:460px;
width:300px;
border:3px solid red;
}
#pic1{
position:absolute;
left:38px;
top:13px;
}
#pic2
{
background-image:url(ball.png);
background-repeat:no-repeat;
position:absolute;
height:181px;
width:156px;
left:83px;
top:169px;
}
p{
position:absolute;
font-family:"Times New Roman" , Times ,serif;
font-size:16px;
font-style:italic;
}
#title1{
left:61px;
top:133px;
}
#title2{
left:37px;
top:82px;
}
</style>
</head>
<body>
<div id="container">
<img id="pic1" src="../../Users/Administrator/Downloads/saddfs.gif" alt=""/>
<p id="title1"> presentation</p>
<div id="pic2">
<p id="title2"> presentation</p>
</div>
</div>
</body>
</html>