相对于其容器放置元素 [英] Position an element relative to its container

问题描述

我正在尝试使用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. 跨浏览器(理想情况下没有太多的浏览器黑客攻击)
2. 以怪癖模式运行
3. 尽可能清晰/整洁，以方便自定义
4. 尽可能不使用JavaScript.

推荐答案

使用CSS定位是正确的选择.快速浏览一下:

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

position: relative将相对于自身进行元素布局.换句话说，这些元素以常规流程进行布局，然后将其从常规流程中移除并偏移您指定的任何值(顶部，右侧，底部，左侧).重要的是要注意，因为它已从流中删除，所以周围的其他元素也不会随之移动(如果您希望此行为，请使用负边距代替).

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.

演示:

#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，而#container的左上角则向左50px.如果未设置#container，则#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.

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