position

목차

• static
• relative
• absolute
• fixed
• sticky

---

static

일반 문서의 흐름에 맞게 배치하는 기본값

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

---

relative

static 위치에서 top, right, bottom, left 등의 속성에 의한 상대 위치치를 지정한다

그렇지 않으면 static과 동일

인기글

• 

  창원 262번 버스정보(시내) : 덕동공영차고지 소계

• 

  23. 03. 19 유기 동물 등록 현황(공고 25마리)

• 

  신내동 뮤직복싱 체육관

• 

  갤럭시S23 울트라라이온이 빨리 해야 할 20가지 설정

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
    position: relative
    left: -30px;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

---

absolute

요소가 일반적인 문서 흐름을 따르지 않도록 합니다.

relative 값을 사용하는 상위 요소를 기반으로 위치 값을 지정하지만 정적 값을 가진 상위 요소는 제외

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
    position: absolute;
    top: 0px;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

---

fixed

view port(실제 브라우저에 표시되는 영역)의 기준으로 위치 값 지정

위로 가기 위해 고정된 것을 구현할 때 사용

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);

}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
    position: fixed;
    bottom: 10%;
    right: 10%;
}
.div_sticky {
    background-color: blueviolet;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

---

sticky

요소가 HTML 문서에서 정적과 같은 일반적인 흐름을 따르고,

스크롤 위치가 임계점에 도달하면 화면에 고정할 수 있습니다.

top 속성만 적용되며 바로 위의 부모 요소 내에서만 적용됩니다.

main, section, article {
    padding: 20px;
}
main {
    background-color: yellow;
}
section {
    background-color: aqua;
}
article {
    background-color: rgba(0, 0, 255, 0.404);
	height: 8000px;
}
.div_static {
    background-color: white;
}
.div_relative {
    background-color: red;
}
.div_absolute {
    background-color: gray;
}
.div_fixed {
    background-color: green;
}
.div_sticky {
    background-color: blueviolet;
    position: sticky;
}

<main>
    main
    <section>
        section
        <article>
            article
            <div class="div_static">static</div>
            <div class="div_relative">relative</div>
            <div class="div_absolute">absolute</div>
            <div class="div_fixed">fixed</div>
            <div class="div_sticky">sticky</div>
        </article>
    </section>
</main>

---

Github

링크