相对于其容器放置元素

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

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

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

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

您认为CSS定位是正确的做法。这是一个快速的总结：

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

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

展示：

#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，而的左上角则向左侧50px #container。如果#container未position: relative设置，则其坐标#box将相对于浏览器视口的左上角。

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

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属性的值。

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

位置：静态

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

#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的：你可以发现上面的图像的HTML 这里和CSS 这里。

希望本教程对您有所帮助。

绝对定位相对于元素的最接近祖先定位元素。因此，放置position: relative在容器上，然后放置子元素，top并且left只要子元素具有，它将相对于容器的左上角position: absolute。CSS 2.1规范中提供了更多信息。

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

因此，如果要将子元素放置在父容器的左上方，则应执行以下操作：

.parent {
  position: relative;
} 

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

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