使用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设置在其上,则它将充当其子元素的定位坐标的父元素.

展示:

#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将相对于浏览器视图端口的左上角.

希望有所帮助.

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

希望本教程有所帮助.