使用CSS定位相对于其容器的HTML元素

Question

我正在尝试使用HTML和CSS创建一个水平的100％堆积条形图。我想使用具有背景颜色和百分比宽度的DIV创建条形，具体取决于我想要绘制的值。我还希望有一个网格线来标记图表中的任意位置。

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

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

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

Answer 1

你是对的，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;
}

#box

在该示例中，#container的左上角将向下移动100px，距离#container左上角的距离为50px。如果position: relative未设置#box，则{{1}}的坐标将相对于浏览器视图端口的左上角。

希望有所帮助。

Answer 2

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

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

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

Answer 3

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

以下是position属性的值。

• 静态
• 固定
• 相对
• 绝对

位置：静态

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

#myelem {
    position : static;
}

位置：已修复

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

（非常适合在页面右下角滚动到顶部按钮）。

#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的位置，它将与页面一起滚动。

最后......

位置相对+绝对

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

#container {
    position : relative;
}

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

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

GitHub：您可以找到上面图片here和CSS here的HTML。

希望tutorial有所帮助。

Answer 4

绝对定位相对于其最近定位的祖先定位元素。因此，将position: relative放在容器上，然后对于子元素，top和left将相对于容器的左上角，只要子元素具有position: absolute 。有关详细信息，请参阅the CSS 2.1 specification。

Answer 5

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

因此，如果您想将子元素放置在父容器的左上角，那么您应该这样做：

.parent {
  position: relative;
} 

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

阅读this article，您将获益匪浅。希望这有帮助！