使用CSS相对于其容器定位HTML元素 [英] Position an HTML element relative to its container using CSS

问题描述

我试图使用HTML和CSS创建一个水平100％的堆叠条形图。我想使用DIVs背景颜色和百分比宽度创建条，具体取决于我想要的图形的值。我也想要一个网格线来标记图形中的任意位置。

I'm trying to create a horizontal 100% stacked-bar graph using HTML and CSS. I'd like to create the bars using DIVs with 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.

在我的实验中，我已经通过分配CSS属性 float：left 。但是，我想避免，因为它真的似乎混乱的布局在混乱的方式。

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定位应该能够处理这个问题，但是我不'还不知道怎么做。我想要能够指定几个元素相对于它们的容器的左上角的位置。我经常遇到这种问题（甚至在这个特定的图形项目之外），所以我想要一个方法：

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:

1. Cross -


2. 尽可能清晰，方便自定义


3. 尽可能不使用JavaScript。

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.

推荐答案

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

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

position：relative 将布局一个相对于 em>换句话说，元素以正常流动布局，然后从正常流动中移除，并通过您指定的任何值（上，右，下，左）进行偏移。重要的是要注意，因为它从流中移除，所以其周围的其他元素不会随之移动（如果你想要这种行为，则使用负边距）。

position: relative will 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：absolute 感兴趣，它将相对于容器定位一个元素。默认情况下，容器是浏览器窗口，但如果父元素有 position：relative 或 position：absolute

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

要演示：

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

#container {
  position: relative;
}

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

在该示例中，框将在下面的100px和左上角的50px #container 。如果 #container 没有设置 position：relative ，坐标 #box 将相对于浏览器视图端口的左上角。

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

希望有助于。

这篇关于使用CSS相对于其容器定位HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！