Html 相对于其容器定位元素

Position an element relative to its container

提问by Craig Walker

I'm trying to create a horizontal 100% stacked bar graph using HTML and CSS. I'd like to create the bars using DIVswith background colors and percentage widths depending on the values I want to graph. I also want to have a grid lines to mark an arbitrary position along the graph.

我正在尝试使用 HTML 和 CSS 创建一个水平的 100% 堆叠条形图。我想DIVs根据我想要绘制的值创建带有背景颜色和百分比宽度的条形图。我还想要一条网格线来标记图形上的任意位置。

In my experimentation, I've already gotten the bars to stack horizontally by assigning the CSS property float: left. However, I'd like to avoid that, as it really seems to mess with the layout in confusing ways. Also, the grid lines don't seem to work very well when the bars are floated.

在我的实验中，我已经通过分配 CSS 属性使条形水平堆叠float: left。但是，我想避免这种情况，因为它似乎确实以令人困惑的方式扰乱了布局。此外，当条形浮动时，网格线似乎不能很好地工作。

I think that CSS positioning should be able to handle this, but I don't yet know how to do it. I want to be able to specify the position of several elements relative to the top-left corner of their container. I run into this sort of issue regularly (even outside of this particular graph project), so I'd like a method that's:

我认为CSS定位应该能够处理这个，但我还不知道如何去做。我希望能够指定几个元素相对于其容器左上角的位置。我经常遇到这类问题（甚至在这个特定的图形项目之外），所以我想要一种方法：

1. Cross-browser (ideally without too many browser hacks)
2. Runs in Quirks mode
3. As clear/clean as possible, to facilitate customizations
4. Done without JavaScript if possible.

1. 跨浏览器（理想情况下没有太多浏览器黑客攻击）
2. 在 Quirks 模式下运行
3. 尽可能清晰/干净，以方便定制
4. 如果可能的话，不要使用 JavaScript。

回答by Bryan M.

You are right that CSS positioning is the way to go. Here's a quick run down:

你是对的，CSS 定位是要走的路。这是一个快速运行：

position: relativewill layout an element relative to itself.In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).

position: relative将相对于自身布局一个元素。换句话说，元素在正常流中布局，然后从正常流中移除并偏移您指定的任何值（顶部、右侧、底部、左侧）。重要的是要注意，因为它已从流中移除，所以它周围的其他元素不会随之移动（如果您想要这种行为，请改用负边距）。

However, you're most likely interested in position: absolutewhich will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relativeor position: absoluteset on it, then it will act as the parent for positioning coordinates for its children.

但是，您最有可能对position: absolute哪个元素相对于容器进行定位感兴趣。默认情况下，容器是浏览器窗口，但如果父元素在其上具有position: relative或position: absolute设置，则它将充当父元素，为其子元素定位坐标。

To demonstrate:

展示：

#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>

In that example, the top left corner of #boxwould be 100px down and 50px left of the top left corner of #container. If #containerdid not have position: relativeset, the coordinates of #boxwould be relative to the top left corner of the browser view port.

在该示例中， 的左上角#box向下 100 像素，左上角向左 50 像素#container。如果#container没有position: relative设置，坐标#box将相对于浏览器视口的左上角。

回答by Stephen Deken

You have to explicitly set the position of the parent container along with the position of the child container. The typical way to do that is something like this:

您必须显式设置父容器的位置以及子容器的位置。这样做的典型方法是这样的：

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

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

回答by yusufshakeel

I know I am late but hope this helps.

我知道我迟到了，但希望这会有所帮助。

Following are the values for the position property.

以下是 position 属性的值。

• static
• fixed
• relative
• absolute

• 静止的
• 固定的
• 相对的
• 绝对

position : static

位置：静态

This is default. It means the element will occur at a position that it normally would.

这是默认设置。这意味着元素将出现在它通常会出现的位置。

#myelem {
    position : static;
}

position : fixed

位置：固定

This will set the position of an element with respect to the browser window (viewport). A fixed positioned element will remain in its position even when the page scrolls.

这将设置元素相对于浏览器窗口（视口）的位置。即使页面滚动，固定定位的元素也将保持在其位置。

(Ideal if you want scroll-to-top button at the bottom right corner of the page).

（如果您想要页面右下角的滚动到顶部按钮，这是理想的选择）。

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

position : relative

位置：相对

To place an element at a new location relative to its original position.

将元素放置在相对于其原始位置的新位置。

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

The above CSS will move the #myelem element 30px to the left and 30px from the top of its actual location.

上面的 CSS 会将 #myelem 元素向左移动 30px，从其实际位置的顶部移动 30px。

position : absolute

位置：绝对

If we want an element to be placed at an exact position in the page.

如果我们希望将元素放置在页面中的确切位置。

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

The above CSS will position #myelem element at a position 30px from top and 300px from the left in the page and it will scroll with the page.

上面的 CSS 将 #myelem 元素定位在页面中距离顶部 30px 和左侧 300px 的位置，它会随着页面滚动。

And finally...

最后...

position relative + absolute

位置相对 + 绝对

We can set the position property of a parent element to relativeand then set the position property of the child element to absolute. This way we can position the child relative to the parent at an absolute position.

我们可以将父元素的 position 属性设置为relative，然后将子元素的 position 属性设置为absolute。这样我们就可以将孩子相对于父母定位在绝对位置。

#container {
    position : relative;
}

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

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

我们可以在上图中看到#div-2元素位于#container元素内的右上角。

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

GitHub的：你可以发现上面的图像的HTML这里和CSS这里。

Hope this tutorialhelps.

希望本教程有所帮助。

回答by Jim

Absolute positioning positions an element relative to its nearest positioned ancestor. So put position: relativeon the container, then for child elements, topand leftwill 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.

绝对定位将元素相对于其最近定位的祖先定位。所以把position: relative容器上，那么对于子元素，top并且left将相对于左上角的容器，只要子元素都有position: absolute。CSS 2.1 规范中提供了更多信息。

回答by Nesha Zoric

If you need to position an element relative to its containing element first you need to add position: relativeto the container element. The child element you want to position relatively to the parent has to haveposition: 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 relativelypositioned parent, the element will be positioned relative to the root element(directly to the HTML element).

如果需要首先相对于其包含元素定位元素，则需要添加position: relative到容器元素。要相对于父元素定位的子元素必须具有position: absolute. 绝对定位的工作方式是相对于第一个相对（或绝对）定位的父元素完成。如果没有相对定位的父元素，元素将相对于根元素（直接相对于 HTML 元素）定位。

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!

阅读本文将使您受益匪浅。希望这可以帮助！