我正在尝试使用HTML和CSS创建一个水平的100%堆积条形图.我想使用具有背景颜色和百分比宽度的DIV创建条形,具体取决于我想要绘制的值.我还希望有一个网格线来标记图表中的任意位置.
在我的实验中,我已经通过分配CSS属性使条形水平堆叠float: left.但是,我想避免这种情况,因为它似乎以混乱的方式混淆了布局.此外,当条形浮动时,网格线似乎不能很好地工作.
我认为CSS定位应该能够解决这个问题,但我还不知道该怎么做.我希望能够指定几个元素相对于其容器左上角的位置.我经常遇到这种问题(甚至在这个特定的图形项目之外),所以我想要一个方法:
跨浏览器(理想情况下没有太多的浏览器黑客)
以Quirks模式运行
尽可能清晰/干净,以方便定制
如果可能,不使用JavaScript完成.
Bryan M... 370
你是对的,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;
}
absolute
在该示例中,左上角#box将是100px,左上角是50px #container.如果#container没有position: relative设置,坐标#box将相对于浏览器视图端口的左上角.
希望有所帮助.
你是对的,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;
}
absolute
在该示例中,左上角#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 这里.
希望本教程有所帮助.
京公网安备 11010802040832号 | 京ICP备19059560号-6 