컨테이너를 기준으로 요소 배치

HTML과 CSS를 사용하여 가로 100 % 누적 막대 그래프를 만들려고합니다. DIVs그래프로 표시하려는 값에 따라 배경색과 백분율 너비 를 사용하여 막대를 만들고 싶습니다 . 또한 그래프를 따라 임의의 위치를 ​​표시하는 그리드 선이 필요합니다.

실험에서 CSS 속성을 할당하여 가로 막대를 이미 쌓았습니다 float: left. 그러나 혼란스러운 방식으로 레이아웃을 혼란스럽게하는 것처럼 보이기 때문에 피하고 싶습니다. 또한 막대가 부유 할 때 그리드 선이 제대로 작동하지 않는 것 같습니다.

CSS 포지셔닝이이를 처리 할 수있을 것이라고 생각하지만 아직 어떻게 해야할지 모르겠습니다. 컨테이너의 왼쪽 상단 모서리를 기준으로 여러 요소의 위치를 ​​지정할 수 있기를 원합니다. 나는이 종류의 문제를 정기적으로 (이 특정 그래프 프로젝트를 제외하고) 실행하기 때문에 다음과 같은 방법을 원합니다.

1. 브라우저 간 (이상적으로 많은 브라우저 핵이없는)
2. Quirks 모드에서 실행
3. 사용자 정의를 용이하게하기 위해 가능한 한 명확하고 깨끗한
4. 가능하면 JavaScript없이 완료하십시오.

CSS 포지셔닝이 좋은 길입니다. 빠른 요약은 다음과 같습니다.

position: relative자신을 기준으로 요소를 레이아웃 합니다. 다시 말해, 요소는 정상 흐름으로 배치 된 다음 정상 흐름에서 제거되고 지정한 값 (상단, 오른쪽, 하단, 왼쪽)으로 오프셋됩니다. 흐름에서 제거되기 때문에 주변의 다른 요소는 흐름과 함께 이동하지 않습니다 (이 동작을 원하면 대신 음수 여백을 사용하십시오).

그러나 position: absolute컨테이너를 기준으로 요소를 배치하는 데 관심 이 있습니다. 기본적으로 컨테이너는 브라우저 창이지만 상위 요소에 설정 position: relative되었거나 position: absolute설정된 경우 하위의 좌표를 배치하기위한 상위 역할을합니다.

시연하려면 :

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

이 예에서의 왼쪽 상단은 #box아래쪽 100px , 왼쪽 상단의 50px 왼쪽입니다 #container. 설정 #container하지 않은 경우 position: relative좌표 #box는 브라우저보기 포트의 왼쪽 상단을 기준으로합니다.

하위 컨테이너의 위치와 함께 상위 컨테이너의 위치를 ​​명시 적으로 설정해야합니다. 이를 수행하는 일반적인 방법은 다음과 같습니다.

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

나는 늦었다는 것을 알고 있지만 이것이 도움이되기를 바랍니다.

position 속성의 값은 다음과 같습니다.

• 공전
• 결정된
• 상대적인
• 순수한

위치 : 정적

이것이 기본값입니다. 이는 요소가 정상적으로 작동하는 위치에서 발생한다는 것을 의미합니다.

#myelem {
    position : static;
}

위치 : 고정

브라우저 창 (뷰포트)에 대한 요소의 위치가 설정됩니다. 고정 된 위치 지정된 요소는 페이지가 스크롤 되더라도 해당 위치에 유지됩니다.

(페이지 오른쪽 하단에있는 맨 위로 스크롤 버튼을 원하는 경우에 이상적).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

위치 : 상대

원래 위치를 기준으로 새 위치에 요소를 배치합니다.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

위의 CSS는 #myelem 요소를 왼쪽으로 30 픽셀, 실제 위치에서 30 픽셀로 이동합니다.

위치 : 절대

페이지에서 요소를 정확한 위치에 배치하려면

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

위의 CSS는 #myelem 요소를 페이지에서 30px, 왼쪽에서 300px 위치에 놓고 페이지와 함께 스크롤합니다.

그리고 마지막으로...

상대 위치 + 절대

부모 요소의 position 속성을 relative 로 설정 한 다음 자식 요소의 position 속성을 absolute 로 설정할 수 있습니다. 이런 식으로 우리는 부모를 기준으로 자녀를 절대 위치에 배치 할 수 있습니다.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

위 이미지에서 # div-2 요소는 #container 요소의 오른쪽 상단에 있습니다 .

GitHub의 : 당신은 위의 이미지의 HTML 찾을 수 있습니다 여기에 와 CSS 여기를 .

이 튜토리얼이 도움 이 되길 바랍니다 .

절대 위치는 요소를 가장 가까운 위치의 조상에 상대적으로 배치합니다. 그래서 넣어 position: relative자식 요소에 대한 다음, 용기에, top그리고 left왼쪽 상단에 너무 오래 자식 요소를 가지고있는 컨테이너의 상대가 될 것입니다 position: absolute. 자세한 내용은 CSS 2.1 사양에 나와 있습니다.

포함하는 요소를 기준으로 요소를 배치해야하는 경우 먼저 position: relative 컨테이너 요소 에 추가 해야합니다 . 부모에 상대적으로 배치하려는 자식 요소 에는 있어야 position: absolute 합니다. 절대 위치 지정이 작동하는 방식은 상대적으로 (또는 절대적으로) 배치 된 첫 번째 상위 요소와 관련하여 수행됩니다 . 상대적으로 배치 된 상위 가 없는 경우 요소는 루트 요소 (HTML 요소에 직접)를 기준으로 배치됩니다 .

따라서 자식 요소를 부모 컨테이너의 왼쪽 상단에 배치하려면 다음을 수행하십시오.

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

이 기사 를 읽으면 큰 도움 이 됩니다. 도움이 되었기를 바랍니다!