1.부모가 absolute 혹은 relative 혹은 fixed 일때만 위치선정 가능,
만약 부모 position이 없을경우 혹은 static일경우 body를 기준으로 적용됨
2. 자식이 relative일경우 자식을 기준으로 바뀐다.
1.position-relative
<style>
div{
width: 200px; height: 200px;
position: relative;/*요소의 원래 위치를 기준으로 해서 상대적인 위치 선정*/
}
#orange{
background-color: orange;
top: 100px;/*위에서 아래로*/
left: 100px;/*왼쪽에서 오른쪽으로*/
z-index: 3;/*화면에 요소가 쌓이는 순서(뭘 더 앞에 보이게 할것이냐, 숫자가 클수록 앞으로 나옴)*/
}
#tomato{
background-color: tomato;
z-index: 2;
}
#green{
background-color: green;
bottom: 100px;
right: 100px;
}
</style>
</head>
<body>
<div id="orange"></div>
<div id="tomato"></div>
<div id="green"></div>
</body>
z-index의 영향으로 숫자가 젤 큰 오렌지가 제일 앞에 나타나게 된다.
2.position-absolute
<style>
#parents{
height: 300px;
border: 10px solid black;
position: relative;
}
#child{
height: 100px; width: 100px;
background-color: brown;
position: absolute;/*부모가 absolute 혹은 relative 혹은 fixed 일때만 위치선정 가능, 만약 부모 position이 없을경우 혹은 static일경우 body를 기준으로 적용됨*/
bottom: 50px;/*만약 자식이 relative일경우 자식을 기준으로 바뀐다.*/
}
</style>
</head>
<body>
<div id="parents">
<div id="child"></div>
</div>
3.position-fixed
