[CSS] 포지션

---

Position

요소의 위치를 정의

 

 

1.static

position 프로퍼티의 기본값
static으로 지정할시 top,bottom,left,right를 사용할수없다.

<style>
    .parentbox{
        width: 100;
        height: 100;
        background-color: aquamarine;
    }
    .staticbox{
        position: static;
        width: 10;
        height: 10;
        background-color: black;
    }
</style>

<div class="parentbox">
    <div class="staticbox">

    </div>
</div>

 

 

 

2.relative

기본위치를 기준으로 top bottom left, right 를 사용하여 위치 이동

<style>
    .parentbox{
        width: 100;
        height: 100;
        background-color: aquamarine;
    }
    .staticbox{
        position: static;
        width: 10;
        height: 10;
        background-color: black;
    }

    .relbox{
        position: relative;
        top:10%;
        left: 20%;
        width: 10;
        height: 10;
        background-color: red;
    }
</style>

<div class="parentbox">
    <div class="staticbox"></div>
    <div class="relbox"></div>
    
</div>

 

3.absolute

절대위치다. static을 제외한 가장 가까운부모~조상요소를 기준으로 위치를 잡는다,
(relative 인 부모,조상이없다면 document body를 기준으로 한다.)

<style>
    .parentbox{
        position: relative;
        width: 100;
        height: 100;
        background-color: aquamarine;
    }
    .staticbox{
        position: static;
        width: 10;
        height: 10;
        background-color: black;
    }

    .relbox{
        position: relative;
        top:10%;
        left: 20%;
        width: 10;
        height: 10;
        background-color: red;
    }

    .absolbox{
        position: absolute;
        top:10%;
        left: 20%;
        width: 10;
        height: 10;
        background-color: blue;
    }


</style>

<div class="parentbox">
    <div class="staticbox"></div>
    <div class="relbox"></div>
    <div class="absolbox"></div>
</div>
<div class="absolbox"></div>

 

 

 

 

 

4.fixed

부모요소 관계없이 viewport를 기준으로 위치
(스크롤 되도 같은곳에 위치됨)

<style>
    .parentbox{
        position: relative;
        width: 100;
        height: 100;
        background-color: aquamarine;
    }
    .staticbox{
        position: static;
        width: 10;
        height: 10;
        background-color: black;
    }

    .relbox{
        position: relative;
        top:10%;
        left: 20%;
        width: 10;
        height: 10;
        background-color: red;
    }

    .absolbox{
        position: absolute;
        top:10%;
        left: 20%;
        width: 10;
        height: 10;
        background-color: blue;
    }
    
    .fixbox{
        position: fixed;
        top:15%;
        left: 20%;
        width: 10;
        height: 10;
        background-color:yellow;
    }


</style>

<div class="parentbox">
    <div class="staticbox"></div>
    <div class="relbox"></div>
    <div class="absolbox"></div>
    <div class="fixbox"></div>
</div>
<div class="absolbox"></div>

 

 

 

5.z-index

화면전면에 나올 요소를 결정한다.(static에는 적용x)
숫자가 큰게 앞으로 숫자가 작은 요소가 큰요소의 뒤에 위치하게된다.

.zbox{
    position: relative;
    z-index: 100;
    width: 60;
    height: 100;
    background-color: bisque;
    opacity: 0.8;
}

 

 

 

 

 

6.overflow

자식요소가 부모 요소를 벗어났을때 처리

 

visible	벗어난 부분을 표시(기본)
hidden	벗어난 부분 제거
scroll	벗어난 부분없어도 스크롤 표시
auto	영역벗어난 부분만 스크롤

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-position