position
속성은 요소의 위치를 정의한다.
top
left
right
bottom
속성과 함께 사용하여 위치를 지정한다.
static은 position속성의 기본값이다.
기본적인 플로우에 따라 위에서 아래서 좌에서 우로 배치되면 자식요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.
좌표 속성(top bottom left right)를 같이 사용할 수 없다
기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 속성을 사용하여 위치를 이동시킨다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
width: 150px;
height: 150px;
background: #d3d3d3;
border: 1px solid #d3d3d3;
margin: 50px;
}
.relative-box {
position: relative;
top: 100px; left: 100px;
background: #8f53a7;
color: #30f883;
font-weight: bold;
text-align: center;
line-height: 150px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="relative-box">relative 속성</div>
</div>
</body>
</html>
static을 제외한 부모 요소 또는 가장 가까이 있는 조상요소를 기준으로 좌표 프로퍼티만큼 이동한다.
만일 부모 또는 조상 요소가 static인 경우 document body 기준으로 위치한다.
absolute를 지정하게 되면 다른 요소가 먼저 위치를 갖고있어도 뒤로 밀리지 않고 덮어쓰게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
width: 200px;
height: 200px;
background: #d3d3d3;
border: 1px solid #d3d3d3;
margin: 50px 0 0 300px;
position: relative;
}
.absolute-box {
position: absolute;
height: 200px; width: 200px;
top: 50px; left: 50px;
color: #30f883;
font-weight: bold;
text-align: center;
background: #8f53a7;
line-height: 200px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="absolute-box">absolute(부모속성이 있음)</div>
</div>
<div class="absolute-box">absolute(부모속성이 없음)</div></body>
</body>
</html>
부모 요소와 관계없이 브라우저의 viewport기주으로 좌표프로퍼티를 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
z-index 속성에 큰 숫자값을 지정할수록 위에 출력된다.
position 속성이 static이외인 요소에만 적용된다.
overflow 속성은 자식요소가 부모요소의 영역을 벗어났을 때 처리 방법을 정의한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 150px;
height: 150px;
padding: 10px;
margin: 30px;
font-size: 1.2em;
border-radius: 6px;
border-color: gray;
border-style: dotted;
float: left;
}
.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }
</style>
<title>Document</title>
</head>
<body>
<h1>overflow</h1>
<div class="visible"><h3>visible</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="hidden"><h3>hidden</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="scroll"><h3>scroll</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="auto"><h3>auto</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
</html>