CSS - postion 속성

postion

 

CSS의 position 속성은 HTML 요소의 위치를 지정하는 데 사용되는 속성이다.

이 속성을 사용하여 요소를 상대적으로 배치하거나 절대적으로 배치하고, 필요에 따라 다른 요소들과 겹치도록 조정할 수 있다.

• position 속성값

1. static: 기본값으로, 요소들은 문서의 일반적인 흐름에 따라 배치. top, right, bottom, left, z-index 속성을 적용x
2. relative: 요소자기자신을 기준 -> 위치상 부모를 relative 속성으로 설정가능
3. absolute: 위치상 부모요소를 기준으로 배치된다-> 구조상 부모요소 이기때문에 위치상 부모가 누구인지 파악할것
4. fixed: 요소가 뷰포트(브라우저 창)에 상대적으로 고정되어 스크롤해도 화면에서 사라지지 않는다.
5. sticky: 스크롤 영역을 기준 .

top, right, bottom, left, z-index 속성을 이용하여 상대적으로 이동시킬 수 있다 : 요소의 방향별 거리를 지정 할 수 있다.

 

 

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
    width: 300px;
    height: 200px;
    background-color: lightgray;
    position: relative; /* relative position을 적용 */
  }

  .box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute; /* absolute position을 적용 */
    top: 30px;
    left: 20px;
  }

  .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 150px;
  }

** 위치상 container가 relative로 부모속성이기 때문에  container를 기준으로 box1과 box2의 위치가 옮겨지게 된다