Skip to content

CSS:position

Options

static
문서 흐름에 따른 기본 위치 (기본값)
top right bottom left 등 위치 속성은 무시됨.
absolute
(static 이 아닌) 첫 번째 부모 요소 있으면 해당 부모 요소 기준.
  • 부모 요소 기준으로 하려면, 부모 요소가 relative, absolute, fixed 속성 중 하나여야 함.
(static 이 아닌) 첫 번째 부모 요소 없는 경우엔 브라우저 창 기준.
스크롤 하면 위치 변동.
정확한 위치는 top right bottom left 속성 이용해 정함.
해당 요소의 다음에 있던 요소가 그 자리 차지.
어떤 요소의 position 속성을 absolute로 설정하면, 부모 요소의 position 속성을 relative로 지정해주는 것이 관례입니다.
relative
관계형 위치(기존에 자리 잡던 위치)를 기준으로 위치 설정.
static일 때 해당 요소의 현재 기본 위치 기준
정확한 위치는 top right bottom left 속성 이용.
해당 요소의 기본 위치가 빈 공간으로 유지
fixed
무조건 브라우저 창 기준.
정확한 위치는 top right bottom left 속성 이용해 정함.
해당 요소의 다음에 있던 요소가 그 자리를 차지.
홈페이지 로딩 늦는 원인 될 수 있으니 주의 !! (맨 하단 참고) <- 확인 필요.
IE7 이상 지원
sticky
relative처럼 작동하다가, 스크롤 시 설정된 top, left 값 위치 도달시 거기에 고정.
relative와 다른 점은 right, bottom 속성값 적용 X. (실제 해보니 ㅡㅡ;)
스크롤 상단 고정 메뉴 만들 때 사용.3. 브라우저에 따라 overflow:hidden 또는 overflow:auto 일 때 작동 안 될 수 있음.
IE 지원 X
unset
속성을 부모로부터 상속받은 경우 그 상속값으로, 아니면 초기값으로 재설정
inherit
부모 요소의 속성 상속
initial
속성 초기화

relative

chart.js 도넛 그래프 중앙에 글씨 넣는 예제로 사용 방법을 알 수 있다.

HTML파일: 

<div class="relative">
  <canvas id="myChart"></canvas>      
  <div class="absolute-center text-center">
    <p>Some text</p>
    <p>Some text</p>
  </div>
</div>

(예의상 넣는) JavaScript 파일: 

var data = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: {
      display: false
    }
  }
});

CSS 파일 (여기가 메인이다): 

.relative {
  position: relative;
}

.absolute-center {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-center{
  text-align: center;
}

p {
  font-size: 1.5rem;
}

Favorite site