1. position
(1) 정의
요소들이 화면에 어떻게 배치될 것인지 지정하는 속성
이 속성은 자식 요소에게 대물림되지 않는다.
(font-size: 2em 이 되어있으면 자식 요소들의 폰트 크기는 대를 거듭할수록 복리로 커졌었다.)
** top, bottom,left,right
: 기준점에서 얼마 만큼 떨어졌는가를 나타낸다.
(top = 25px 기준 점에서 25px 만큼 내려갔다. bottom = 30px 기준 점에서 30px 올라갔다.
left = 80px 기준 점에서 80px 만큼 오른쪽으로 갔다. right = 40px 기준 점에서 45px 만큼 왼쪽으로 갔다. )
(2) 속성
ㄱ. static
기본값, 전적으로 페이지 흐름을 따른다.
top, bottom, left,right,z-index 써봤자 position: static;이면 적용되지 않는다.
ㄴ. relative
원래 요소가 있던 위치를 기준으로 top,bottom,left,right 값이 적용된다.
(top= 30px을 넣으면 원래 있던 위치보다 30px 밑으로 내려가겠다는 의미이다. left = 30px이면 30px만큼 오른쪽으로 간다는 말이다. )
요소의 위치는 이동해도, 요소가 차지하고 있던 공백은 그대로 유지된다.
(사람이 의자에서 일어나도 의자는 원래 위치에 그대로 있는다. 그것을 생각하면 된다.)
ㄷ. absolute
부모 요소 중 최초로 static이 아닌 녀석을 기준으로, top~right 이동을 한다.
(ex - top = 30px 하면 부모 요소의 맨 위에서부터 30px 떨어진 것이다.
left = 30px 하면 부모 요소의 맨 왼쪽에서부터 30px 떨어진 것이다. )
해당 속성일 때, 요소가 움직이면, 요소가 차지하던 공백을 형제 요소들이 채운다.
ㄹ. fixed
뷰포트를 기준으로 top~right 이동을 한다.
(뷰포트: 현재 보고 있는 컴퓨터 화면)
컴퓨터 화면 자체가 기준이 되서 스크롤을 내려도 fixed된 녀석은 조정된 위치에 그대로 있다.
ㅁ. sticky
요소가 언제까지 스크롤 될 수 있는지를 설정하는 속성이다.
position = sticky로 되어있고, top = 30px 이면,
정상적으로 스크롤이 되다가, viewport와 요소의 거리 차이가 30px 나면 그 다음부터 더 이상 스크롤 되지 않고
해당 요소는 fixed 된다.
(인터넷 기사 읽을 때, 처음엔 하단에 있다가 스크롤을 통해
어느 정도 상단에 존재하는 순간, 고정되는 양 옆에 광고 팝업창을 생각하면 될 것이다.)
2. z-index
부모 자식 간에는 자식이 항상 우선적으로 앞에 나온다.
z-index가 적용되는 것은 형제 요소끼리 만이다.
겹칠 때 맨 위로 갈 우선 순위를 정하는 것이다.
z - index = auto; 가 기본값인데 auto = 0과 같다.
겹치는 요소 A의 z-index가 auto일때, 겹치는 요소B가 0보다 크면 맨 위에 표기되고, 0보다 작으면 A가 겹치는 부분에 표기 된다.
3. 스스로 해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습 페이지 </title>
<link rel="stylesheet" href="1_style.css">
</head>
<body>
<div class="outer">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="five">5
<div class="inner">
5-1
</div>
</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>/* */
.outer{
position: relative;
border: 5px dashed darkgreen;
background-color: darkred;
width: calc(100vw - 32px);
height: calc(100vw - 32px);
align-items: center;
}
body{
overflow: scroll;
}
.outer > div{
display: inline-block;
border: 2px solid navajowhite;
background-color: rgb(155, 155, 155);
width: calc((100vh - 32px) / 4);
height: calc((100vh - 32px) / 4);
margin: 20px;
padding: 0 0 0 0;
}
.outer > div.five{
display: block;
position: sticky;
top: 10px;
left: 10px;
margin: 0;
background-color: darkorange;
margin: 20px;
padding: 0 0 0 0;
}
.outer > div.five > div.inner{
position: absolute;
top: 10px;
display: inline - block;
background-color: aqua;
width: 40px;
height: 40px;
margin: 0px;
}'프론트엔드 개발 > HTML, CSS - 이론' 카테고리의 다른 글
| [CSS] Flex layout (0) | 2023.03.02 |
|---|---|
| [CSS] 요소 감추는 방법 (0) | 2023.02.28 |
| [CSS] 배경 꾸미기 (0) | 2023.02.24 |
| [CSS] 박스 모델 2 (0) | 2023.02.24 |
| [CSS] 박스모델 1 (0) | 2023.02.23 |
