TIL 4 | CSS(layout)_1.position

나중에 지금까지 배운 HTML 과 CSS 를 한번정리해서 올릴 예정이다.
그전에 오늘은 css 에서 중요한 3가지 Property에 대해 정리해 보려고 한다.

Position

CSS position 속성은 문서상에 요소를 배치하는데에 사용한다.

• static - default 값 ~~(거의 사용하지 않음)~~
• relative - 위치잡는데 있어서 기준점
• absolute - top,bottom,left,right 로 위치지정
• fixed - 화면성에서 그 위치에 절대적으로 고정시키는것.

relative,absolute

HTML
  <div class="box">
    position:relative
    <div class="pink">position:absolute<br>top:50px;<br>left:20px;</div>
    <div class="yellow">position:absolute<br>bottom:0;<br>right:0;</div>
  </div>

부모태그 { position:relative;}
자식태그 { position:absolute; 
         top:부모태그 기준으로 위로부터 거리px; 
         left:부모태그 기준으로 왼쪽부터 거리px;}

만약 정 가운데에 위치하게 하고 싶다면?

자식태그에게
.pink { 
  position: absolute;
  top: 50%; 
  (위로부터 50% 떨어져랏!)
  left: 50%;
  (왼쪽으로 부터 50% 떨어져랏!)
  
  이렇게 하면, 핑크박스의 위,왼쪽기준이 가운데로 오는것 이기 때문에 약간 오른쪽 아래로 위치하게 된다.
  정 가운데로 보내려면 핑크 박스의 50% 만큼씩 움직여 주어야 정가운데에로 위치하게 된다.
  
  transform: translate(-50%,-50%);
  (핑크박스의 50% 만큼 움직이기!)
  
  background-color: pink;
  }

주의할점

1. position:absolute 값을 가진 자식태그는 부모로 부터 넓이나 높이 값을 상속받지 못하기 때문에 따로 지정해 주어야 한다.

fixed

• position:fixed 는 윈도우 자체가 위치 기준점 이기 때문에 부모태그에 position:relative 를 줄 필요가 없다.

• 보통 헤더나 업다운스크롤 버튼 처럼 스크롤을 내려도 그 자리에 위치하게 할때에 사용한다.

주의할점

1. 윈도우 기준으로 그 위치에 놓는 것 이기 때문에 스크롤을 아무리 내려도 그 위치에 존재한다. 심지어 다른 컨텐츠들 위에 존재하기 때문에 스트롤을 내리면 핑크박스 뒤에 있는 컨텐츠 들은 보이지 않게 된다. 그렇기 때문에 필요시 꼭 z-index 값을 조정해 주어야 한다.
2. 뒤에 있는 컨텐츠 위로 올라봐 버리기 때문에 만약 헤더 부분에 position:fixed 값을 주었다면 메인 부분은 헤더 높이 만큼 위로부터 거리랄 두어야 한다.