使用CSS定位HTML元素相对于其容器的位置
我正在尝试使用HTML和CSS创build一个水平的100％堆积条形图。 我想创build带有背景颜色和百分比宽度DIV的酒吧，取决于我想要绘制的值。 我也想要一个网格线来标记图中的任意位置。
在我的实验中，我已经通过分配CSS属性float: left来获得水平堆叠的条。 不过，我想避免这种情况，因为它似乎混乱的布局混乱的方式。 另外，网格浮动时，网格似乎不能很好地工作。
我认为，CSS定位应该能够处理这个，但我还不知道如何去做。 我想能够指定相对于其容器左上angular的几个元素的位置。 我经常遇到这样的问题（即使在这个特定的graphics项目之外），所以我想要一个方法是：
- 跨浏览器（理想情况下，没有太多的浏览器黑客）
- 以怪癖模式运行
- 尽可能清晰/干净，方便定制
- 如果可能，请不要使用JavaScript。
你是对的，CSS定位是要走的路。 这是一个快速运行：
position: relative将相对于自身布置一个元素。 换句话说，元素按正常stream程布置，然后将其从正常stream程中移除，并按您指定的任何值（顶部，右侧，底部，左侧）进行偏移。 重要的是要注意，因为它是从stream中移除的，所以它周围的其他元素将不会随着它移动（如果需要这种行为，请使用负边距）。
但是，您最有可能对position: absolute位置相对于容器定位元素感兴趣。 默认情况下，容器是浏览器窗口，但是如果一个父元素的position: relative或者position: absolute ，那么它将作为它的子元素定位坐标的父元素。
展示：
<div id="container"> <div id="box"> </div> </div>
#container { position: relative; } #box { position: absolute; top: 100px; left: 50px; }
在这个例子中，# #box左上angular将是#container左上angular100px向下和50px左侧。 如果#container没有position: relative set，则#box的坐标将相对于浏览器视图端口的左上angular。
希望有所帮助。
您必须显式设置父容器的位置以及子容器的位置。 典型的做法是这样的：
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: relative ，那么对于子元素，只要子元素具有position: absolute ，则top和left将相对于容器的左上angular。 更多的信息可以在CSS 2.1规范中find 。
我知道我迟到了，但希望这有助于。
以下是头寸属性的值。
- 静态的
- 固定
- 相对的
- 绝对
位置：静态
这是默认的。 这意味着元素将发生在通常情况下的位置。
#myelem { position : static; }
位置：固定
这将设置元素相对于浏览器窗口（视口）的位置。 即使在页面滚动的情况下，固定的定位元素也将保持在其位置上。
（理想的情况下，如果你想在页面的右下angular滚动到顶部的button）。
#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会将#myelem元素放置在页面顶部30px和左边300px的位置，并且会随页面一起滚动。
最后…
相对位置+绝对位置
我们可以将父元素的位置属性设置为相对 ，然后将子元素的位置属性设置为绝对 。 这样，我们可以将孩子相对于父母定位在一个绝对的位置。
#container { position : relative; } #div-2 { position : absolute; top : 0; right : 0; }
我们可以在上图中看到＃div-2元素位于#container元素的右上angular。
GitHub：你可以在这里find上面图片的HTML和CSS。
希望本教程可以帮助。
