Html 相对于元素的容器定位元素

我正在尝试使用HTML和CSS创建一个100%水平堆叠条形图。我想使用

DIVs

创建条形图，背景色和百分比宽度取决于我想要绘制的值。我还想要一条网格线来标记图形上的任意位置

在我的实验中，我已经通过指定CSS属性

float:left

使条形图水平堆叠。然而，我想避免这种情况，因为它似乎真的以令人困惑的方式扰乱了布局。此外，当杆浮动时，网格线似乎工作得不太好

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

跨浏览器（理想情况下没有太多浏览器漏洞）

以怪癖模式运行

尽可能清晰/干净，以便于定制

如果可能的话，不使用JavaScript

---

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

div.parent{
位置：相对位置；
左：0px；/*默认情况下，将其粘贴到任何位置*/
顶部：0px；
}
分区儿童{
位置：绝对位置；
左：10px；
顶部：10px；
}

绝对定位相对于最近定位的祖先定位元素。因此，在容器上放置

position:relative

，然后对于子元素，

top

和

left

将相对于容器的左上角，只要子元素具有

位置：absolute

。有关更多信息，请访问。

您是对的，CSS定位是正确的选择。下面是一个简短的总结：

position:relative

将相对自身布局元素。换句话说，元素在正常流中布局，然后从正常流中删除，并用指定的值（顶部、右侧、底部、左侧）进行偏移。重要的是要注意，因为它已从流中移除，所以它周围的其他元素不会随之移动（如果需要此行为，请使用负边距）

但是，您最有可能感兴趣的是

position:absolute

，它将相对容器定位元素。默认情况下，容器是浏览器窗口，但如果父元素上设置了

position:relative

或

position:absolute

，则它将充当其子元素定位坐标的父元素

证明：

#容器{
位置：相对位置；
边框：1px纯红；
高度：100px；
}
#盒子{
位置：绝对位置；
顶部：50px；
左：20px；
}

绝对的

我知道我迟到了，但希望这能有所帮助

以下是“位置”属性的值

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

位置：静态

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

#myelem {
    position : static;
}

位置：固定

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

（如果您希望滚动到页面右下角的顶部按钮，则此选项非常理想）

位置：相对位置

将图元放置在相对于其原始位置的新位置

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

#container {
    position : relative;
}

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

上面的CSS将把#myelem元素30px向左移动，30px从实际位置的顶部移动

位置：绝对位置

如果我们希望将元素放置在页面中的确切位置

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

上面的CSS将把#myelem元素定位在页面中距顶部30px和距左侧300px的位置，并随页面滚动

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

最后

相对位置+绝对位置

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

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

#container {
    position : relative;
}

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

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

GitHub：您可以找到上面图像的HTML和CSS

---

希望这能有所帮助。

如果您需要先将元素相对于其包含元素进行定位，则需要将

位置：relative

添加到容器元素中。要相对于父元素定位的子元素必须具有

位置：绝对

。绝对定位的工作方式是相对于第一个相对（或绝对）定位的父元素进行定位。如果没有相对定位的父元素，则该元素将相对于根元素定位（直接定位到HTML元素）

因此，如果要将子元素定位到父容器的左上角，应执行以下操作：

.parent {
  position: relative;
} 

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

---

你将从阅读中受益匪浅。希望这有帮助

如果相对定位的元素为零，则不需要为它们提供顶部或左侧属性值。对于现有浏览器为True，但在规范中未定义。它肯定在规范中定义。阅读第9.4.3节，检查属性的初始值。第9.4.3节说明左侧和顶部的初始值为“自动”。“自动”值的定义有点复杂，我一直无法完全理解它们。我要你的