728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>포지셔닝</title>
<meta charset="UTF-8">
<style>
body > div {
width: 200px;
height: 200px;
background-color: brown;
position: relative;
overflow: auto hidden;
/* overflow : x y */
/* overflow-x : a ; */
/* overflow-y : a ; */
/* auto : 안넘치면 아무것도 안함, 넘치면 스크롤*/
/* scroll : 안넘쳐도 스크롤바 보임*/
/* hidden : 넘치는 것은 안보이게 함*/
/* visible : 넘쳐도 그냥 보이게 함(기본 값)*/
}
body > div > div:nth-child(1) {
/* top: 25px; */
width: 100px;
height: 100px;
background-color: darkorange;
position: relative;
/*
position 속성 값
- static : 원래 있어야 하는 위치에 있게 된다.(기본값)
- relative : position 속성 값이 static 이었을때의 위치를 기준으로 움직인다.
- absolute : position 속성 값이 static 이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. (없다면 문서 자체)
- fixed : 부모/선조 관계 없이 문서를 기준으로 하며 스크롤[ 영향을 받지 않고 그 자리에 떠있음.
이떄 absolute 및 fixed 는 다른요소의 흐름과 배치에 영향을 미치지 않는다.
*/
z-index: 1;
/* z-index : 화면에 표시될 순위. 기본값 0. 수치가 클수록 화면에 보이게 된다. 이 값이 같을 때에는 HTML상 보다 뒤에 명시된 요소가 우선 보이게 된다.*/
}
body > div > div:nth-child(2) {
top: 50px;
left: 200px;
width: 100px;
height: 100px;
background-color: green;
position: absolute;
z-index: 2;
}
body > div > div:nth-child(3) {
right: 25px;
bottom: 25px;
width: 100px;
height: 100px;
background-color: deeppink;
position: fixed;
}
span {
position: absolute;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
aaaaaaaaaaaaaaaaaaaaaaaa<span>123123</span>aaaaaaaaaaaaaaaaaaaaaaaaaaa
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
728x90
반응형