Position
엘리먼트를 배치하는 여러가지 방법을 제공
https://developer.mozilla.org/ko/docs/Web/CSS/position
https://www.w3schools.com/css/css_positioning.asp
(static은 기본값)
relative를 가장 많이 쓰며 top, right, bottom, left 좌표가 만들어짐.
position 실습
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position 실습</title>
<link rel="stylesheet" href="./styles/position.css">
</head>
<body>
<h1>Position 실습</h1>
<div>
<div class="position-absolute">Absolute</div>
<div class="position-relative">Relative</div>
<div class="position-relative move-point">Relative</div>
<div class="position-relative">
Relative
<div class="position-absolute">Absolute</div>
</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>
</div>
</body>
</html>
.position-absolute {
background-color: #F00;
/* 문서(html) 내부에서 절대 위치에 엘리먼트를 배치한다. */
/* 명확한 위치를 설정하지 않으면, 가장 좌측 상단에 배치된다. */
position: absolute;
top: 0;
left: 0;
}z-index
- Position 프로퍼티가 적용된 Box Element에만 적용할 수 있는 프로퍼티.
- 엘리먼트 위에 다른 엘리먼트를 덮어 씌운다.
- 중요한 내용들을 가장 상위에 표현하려 할 때 사용한다.
Overflow
- 자식 엘리먼트의 크기가 부모 엘리먼트의 크기를 벗어날 때,
표현방법을 정의하는 프로퍼티
https://developer.mozilla.org/ko/docs/Web/CSS/overflow
https://www.w3schools.com/css/css_overflow.asp
hidden과 auto를 제일 많이 쓴다.
