html position

학원 수업 내용 복습

🧁 static

기본값으로 주변 요소에 맞춰 자리를 배정한다
position을 지정하지 않았을 때 기본으로 가지는 위치를 static이라고 한다.

<div class="box">
	<div class="red">red</div>
	<div class="blue">blue</div>
</div>

🧁 relatve

원래 위치에서 상대적인 위치를 지정한다

<div class="box">
	<div class="red" style="z-index: 2;">red</div>
	<div class="blue"
         style="position: relative;
                top: -30px;
                left: 30px;
                z-index: 1;">blue</div>
</div>

위에서 blue를 보면 style에 position을 relative로 설정하였다.
그 후 top : -30px; left : 30px; 라고 적었는데,
본인의 원래 위치에서 위쪽으로 30px, 왼쪽으로 30px 위치를 이동한다는 뜻이다.
(참고로 top은 가장 위쪽에서 아래로 갈수록 +값을 가진다)

또한 red도 position: relative가 설정되어있는데 그 이유는 z-index를 사용하기 위해서다. z-index는 값이 높을수록 요소가 가장 위쪽으로 올라가게 된다.
만약 red, blue z-index값을 모두 지우면 요소가 다음과 같이 나타난다.

🧁 absolute

기준이 되는 상위 요소를 지정하여 절대적 위치를 지정한다
기준을 지정하지 않으면 body를 기준으로 위치가 설정된다.
보통은 가장 가까운 상위요소(부모요소)에 relative(기준)를 지정하여 그를 기준으로 삼는다.
즉, absolute는 자신만의 독자적 위치를 가질 수 있다.

<div class="box" style="position: relative;">
                    
	<div class="blue"
                style="position: absolute;
                       top: -20px;
                       right: -30px;">blue</div>
</div>

<div class="red" style="position: absolute;
                        top: 10px;
                        right: 10px;">red</div>

위 코드를 분석해보자!

1. blue
   blue는 position을 absolute로 설정한 후 이의 기준을 바로 상위요소인 box에 잡았다.(box style에 position: relative)
   따라서 blue는 box요소 기준보다 top:-20px; right: -30px;위치로 이동할 것이다.

2. red
   red는 box요소 밖에 따로 빼주어서 position은 absolute지만 기준이 잡힌 요소가 없는 상태다. 따라서 body를 기준으로 top:10px; right:10px에 위치한다.

맨 위 오른쪽에 있는 red와 맨 아래의 blue가 absolute로 지정한 요소들이다!

🧁 fixed

스크롤에 상관없이 항상 고정된 위치를 가진다

<div class="box">
	<div class="red">red</div>
    <div class="blue"
                style="position: fixed;
                       right: 50px;
                       bottom: 10px;
                       z-index: 10;">blue</div>
</div>

사진은 의미가 없어서 따로 올리지는 않겠지만 요소는 화면을 기준으로 right: 50px; bottom: 10px;에 고정적으로 위치하게 된다.
스크롤을 내려도 이동하지 않는다!

🧁 sticky

평소에는 static처럼 움직이다가 스크롤에 걸리면 fixed와 같은 위치를 가진다

<div style="position: sticky;
            top: 50px;
            /* sticky 기준선 */
            background-color: antiquewhite;
            opacity: 08;">
                
        <h3>Hello, world!</h3>
</div>

sticky 또한 사진의 의미가 없어 따로 올리지는 않았다.
요소는 원래 자리에 위치했다가 스크롤을 내려서 화면을 기준으로 요소의 위치가 top 50px 부분에 위치하게 되면 그 부분에 고정되면서 아무리 스크롤을 내려도 움직이지 않는다!