CSS position

CSS position

• css position 프로퍼티는 element 가 어디에 자리를 잡는지를 정한다.
• 코드의 위치와 상관이 없다.

position:relative;

• 자체로는 특별한 의미가 없이 top bottom right left 프로퍼티에 의해 작동된다.

-.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
}
로 하면

겹쳐서 출력되게 할 수 있다.

• 마이너스 값을 주게되면 위로 올라가게 된다.

position: absolute

• 특정 부모에 기준하여 절대적인 위치에 두는것을 가능하게 해준다.
• 해당 특정 부모가 relative, fixed, absolute 중 하나라도 position 으로 가지고 있어야 한다.
• 일반적으로 부모에 relative 를 position 값으로 준다.
  p {
  margin: 0;
  background-color: yellow;
  }
  .absolute {
  position: absolute;
  }
  .right-0 {
  right: 0;
  bottom: 0;
  }
  코드를 작동 시키면
  
• 0값을 주면 딱 붙게 된다!

position: fixed

• fixed 는 absolute 처럼 부모가 필요 없으며 원하는 위치에 고정을 시켜준다. 눈에 보이는 화면 크기만큼 그 내부에서만 움직이게 된다.
• 주변요소와 상관없이 위치하게 된다.