194

我正在尝试使用 HTML 和 CSS 创建一个水平的 100% 堆叠条形图。我想DIVs根据我想要绘制的值使用背景颜色和百分比宽度来创建条形图。我还想要一条网格线来标记图表上的任意位置。

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

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

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

5 回答 5

396

你是对的，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将相对于浏览器视口的左上角。

于 2008-09-19T20:01:06.260 回答
20

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

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

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}
于 2008-09-19T19:50:53.510 回答
16

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

以下是 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 的位置，并且它将随页面滚动。

最后...

相对位置 + 绝对位置

我们可以将父元素的位置属性设置为相对，然后将子元素的位置属性设置为绝对。通过这种方式，我们可以将子代相对于父代定位在绝对位置。

#container {
    position : relative;
}

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

子元素相对定位的父元素的绝对位置。

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

GitHub：您可以在此处找到上图的 HTML，并在此处找到CSS 。

希望本教程有所帮助。

于 2017-06-29T08:09:41.610 回答
3

绝对定位相对于其最近的定位祖先定位元素。所以放在position: relative容器上，然后是子元素，只要子元素有top，left就会相对于容器的左上角position: absolute。CSS 2.1 规范中提供了更多信息。

于 2008-09-19T19:53:05.610 回答
1

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

所以如果你想把你的子元素放在父容器的左上角，你应该这样做：

.parent {
  position: relative;
} 

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

您将从阅读这篇文章中受益匪浅。希望这可以帮助！

于 2018-05-16T14:17:21.987 回答