css position

 

Position 속성

static: 기준 없음 (배치 불가능 / 기본값)
relative: 요소 자기 자신을 위치의 기준점이 되어 배치
absolute: 부모(조상) 요소를 위치의 기준점이 되어 배치
fixed: viewport 기준으로 배치, 조상 값에 영향을 받지 않음.
stickey: scroll영역 기준으로 배치

 

Top, Bottom, Left, Right 속성

top: 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정
bottom: 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정
left: 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정
right: 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정

 

<style>
.parentsuper {
    /* box style */
    height: 500px;
    border: 2px solid black;
    
    padding: 50px;
}

.parent {
    /* box style */
    height: 500px;
    border: 2px dotted green;
}

.child {
    /* box style */
    padding: 5px;
    width: 50px;
    height: 30px;
    border: 3px dotted red;
    border-radius: 12px;
    background-color: lightyellow;

    /* 텍스트 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

/*  position: relative */
.relative1 {
    position: relative;
    left: 100px;
    top: 5px;
}

</style>
<div class="parentsuper">
    <div class="parent">
        <div class="child">1</div>
        <div class="child relative">2</div>
        <div class="child relative1">3</div>
        <div class="child relative1">4</div>
        <div class="child relative1">5</div>
        <div class="child relative2">6</div>
        <div class="child relative2">7</div>
        <div class="child relative1">8</div>
        <div class="child">9</div>
    </div>
</div>

1

2

3

4

5

6

7

8

9