CSS를 사용하여 HTML 요소를 컨테이너를 기준으로 배치

CSS를 사용하여 HTML 요소를 컨테이너를 기준으로 배치

---

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

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

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

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

---

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

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

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

시연하려면 :

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

#container {
  position: relative;
}

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

이 예에서의 왼쪽 상단 모서리는 #box100px 아래로 왼쪽 상단 모서리에서 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;
}

We can see in the above image the #div-2 element is positioned at the top-right corner inside the #container element.

GitHub: You can find the HTML of the above image here and CSS here.

Hope this tutorial helps.

---

Absolute positioning positions an element relative to its nearest positioned ancestor. So put position: relative on the container, then for child elements, top and left will be relative to the top-left of the container so long as the child elements have position: absolute. More information is available in the CSS 2.1 specification.

---

If you need to position an element relative to its containing element first you need to add position: relative to the container element. The child element you want to position relatively to the parent has to have position: absolute. The way that absolute positioning works is that it is done relative to the first relatively (or absolutely) positioned parent element. In case there is no relatively positioned parent, the element will be positioned relative to the root element (directly to the HTML element).

So if you want to position your child element to the top left of the parent container, you should do this:

.parent {
  position: relative;
} 

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

You will benefit greatly from reading this article. Hope this helps!

참고URL : https://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css