[퍼블]CSS Postiton 속성에 대해서

postition에서 선택할 수 있는 값은 5가지가 있다.

• static 
• relative -> 주로 부모요소에 적용
• absolute -> 주로 자식요소에 적용(left, right, top, bottom 속성과 함께 쓰인다) 
  • relative와 함께 쓰일 경우 absolute 속성에는 float 속성과 마찬가지로 공중에 떠있는 것처럼 작용한다
    그래서 부모요소에서 항상 높이 값과 넓이 값을 줘야 함
• fixed 
• sticky

    <div class="parent">
        <div class="child"></div>
    </div>

 

 

.parent{
    background-color: red;
    width: 300px;
    height: 300px;
    position: relative;
}
.child{
    background-color: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
}

부모 태그에서 relative 속성을 주었기 때문에  postiton abolute 속성과 right 0px, bottom 0px을 주었을 경우, 부모 박스에서 오른쪽으로 0 빅셀 아래쪽부터 0 빅 샐 방향으로 자식요소 박스가 이동하였다.

.parent{
    background-color: red;
    width: 300px;
    height: 300px;
    position: relative;
}
.child{
    background-color: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

자식 요소에 top 50%, left 50%, transform: translate(-50%, -50%)을 주게 되면 보모요소 기준으로 정 중앙에 위치하게 됩니다. top 50%, left 50% 속성만 주었을 경우 자식요소의 시작점이 정 중앙으로 가기 때문에 좀 더 고정시켜 줘야 되는데 이때 사용되는 속성값이 transform: translate(-50%, -50%)입니다.