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과 동일

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값을 사용한 상위 요소를 기준으로 위치값을 지정함, 단, static값을 가진 상위요소는 제외

상위요소들이 기본값인 static일때는 html 기준으로 움직임

부모요소인 article에 static이 아닌값을 주면 article기준으로 움직임

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문서 안에서 static과 같이 일반적인 흐름에 따라가다가,

스크롤 위치가 임계점에 이르면 화면에 고정할 수 있음

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

Link