정신과 시간의 방

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만큼 오른쪽으로 간다는 말이다. )

요소의 위치는 이동해도, 요소가 차지하고 있던 공백은 그대로 유지된다.

(사람이 의자에서 일어나도 의자는 원래 위치에 그대로 있는다. 그것을 생각하면 된다.)

position = relative; 일 때 top = 30px, left = 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;
}

저작자표시

[CSS] 포지셔닝