용기를 기준으로 요소 배치

용기를 기준으로 요소 배치

HTML과 CSS를 사용하여 수평으로 100% 쌓인 막대 그래프를 만들려고 합니다.▁bars▁i싶습니▁'▁를 사용하여 막대를 만들고 싶습니다.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아래로 100마일, 왼쪽 상단 모서리에서 50마일입니다.#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;
}

제가 늦었다는 것은 알지만 이것이 도움이 되기를 바랍니다.

다음은 위치 속성 값입니다.

• 정적인
• 고정된.
• 관련있는
• 절대의

위치 : 정적

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

#myelem {
    position : static;
}

위치 : 고정

그러면 브라우저 창(뷰포트)을 기준으로 요소의 위치가 설정됩니다.고정된 위치의 요소는 페이지가 스크롤되는 동안에도 해당 위치에 유지됩니다.

(페이지의 오른쪽 하단 모서리에 있는 스크롤 투 톱 버튼을 사용하는 것이 좋습니다.)

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

위치 : 상대적

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

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

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

위치 : 절대

요소가 페이지의 정확한 위치에 배치되기를 원하는 경우.

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

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

그리고 마지막으로...

상대적 위치 + 절대

상위 요소의 위치 속성을 상대적으로 설정한 다음 하위 요소의 위치 속성을 절대로 설정할 수 있습니다.이런 식으로 우리는 부모에 상대적인 아이를 절대적인 위치에 배치할 수 있습니다.

#container {
    position : relative;
}

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

위 이미지에서 #div-2 요소가 #용기 요소 내부의 오른쪽 상단 모서리에 위치하는 것을 볼 수 있습니다.

GitHub: 위 이미지의 HTML과 CSS를 여기에서 찾을 수 있습니다.

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

절대 위치 지정은 가장 가까운 위치에 있는 조상을 기준으로 요소를 배치합니다.그래서 넣어요position: relative에 용기에 는 용기위에, 고어요소에들이린그리요이소,에▁on들,그,▁container어.top그리고.left하위 요소가 있는 한 컨테이너의 왼쪽 상단에 상대적입니다.position: absolute자세한 내용은 CSS 2.1 사양을 참조하십시오.

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

따라서 상위 컨테이너의 왼쪽 상단에 하위 요소를 배치하려면 다음 작업을 수행해야 합니다.

.parent {
  position: relative;
} 

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

당신은 이 기사를 읽음으로써 큰 이익을 얻을 것입니다.이것이 도움이 되길 바랍니다!

언급URL : https://stackoverflow.com/questions/104953/position-an-element-relative-to-its-container