HTML과 CSS를 사용하여 가로 100 % 누적 막대 그래프를 만들려고합니다. DIVs그래프로 표시하려는 값에 따라 배경색과 백분율 너비 를 사용하여 막대를 만들고 싶습니다 . 또한 그래프를 따라 임의의 위치를 표시하는 그리드 선이 필요합니다.
실험에서 CSS 속성을 할당하여 가로 막대를 이미 쌓았습니다 float: left. 그러나 혼란스러운 방식으로 레이아웃을 혼란스럽게하는 것처럼 보이기 때문에 피하고 싶습니다. 또한 막대가 부유 할 때 그리드 선이 제대로 작동하지 않는 것 같습니다.
CSS 포지셔닝이이를 처리 할 수있을 것이라고 생각하지만 아직 어떻게 해야할지 모르겠습니다. 컨테이너의 왼쪽 상단 모서리를 기준으로 여러 요소의 위치를 지정할 수 있기를 원합니다. 나는이 종류의 문제를 정기적으로 (이 특정 그래프 프로젝트를 제외하고) 실행하기 때문에 다음과 같은 방법을 원합니다.
- 브라우저 간 (이상적으로 많은 브라우저 핵이없는)
- Quirks 모드에서 실행
- 사용자 정의를 용이하게하기 위해 가능한 한 명확하고 깨끗한
- 가능하면 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 요소의 오른쪽 상단에 있습니다 .
답변
절대 위치는 요소를 가장 가까운 위치의 조상에 상대적으로 배치합니다. 그래서 넣어 position: relative자식 요소에 대한 다음, 용기에, top그리고 left왼쪽 상단에 너무 오래 자식 요소를 가지고있는 컨테이너의 상대가 될 것입니다 position: absolute. 자세한 내용은 CSS 2.1 사양에 나와 있습니다.
답변
포함하는 요소를 기준으로 요소를 배치해야하는 경우 먼저 position: relative 컨테이너 요소 에 추가 해야합니다 . 부모에 상대적으로 배치하려는 자식 요소 에는 있어야 position: absolute 합니다. 절대 위치 지정이 작동하는 방식은 상대적으로 (또는 절대적으로) 배치 된 첫 번째 상위 요소와 관련하여 수행됩니다 . 상대적으로 배치 된 상위 가 없는 경우 요소는 루트 요소 (HTML 요소에 직접)를 기준으로 배치됩니다 .
따라서 자식 요소를 부모 컨테이너의 왼쪽 상단에 배치하려면 다음을 수행하십시오.
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}