使用CSS定位相对于其容器的HTML元素

159

我试图使用HTML和CSS创建水平的100％堆积条形图。我想创建带有背景颜色和百分比宽度的DIV的条形图，具体取决于我想要绘制的值。我也想要一个网格线来标记图上的任意位置。使用CSS定位相对于其容器的HTML元素

在我的实验中，我已经通过分配CSS属性float: left来获得水平堆叠条。不过，我想避免这种情况，因为它似乎以混乱的方式混淆了布局。此外，网格线条在浮动时似乎效果不佳。

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

跨浏览器（最好是没有太多的浏览器的黑客）
奔跑怪癖模式
尽可能清晰/尽可能方便定制
尽可能不使用JavaScript即可完成。

来源

2008-09-19 Craig Walker

为什么它必须以怪癖模式运行？ – 2008-09-19 19:49:41

由于该网站我将要添加它以怪癖模式运行，并且在这十年内任何时候都不会改变。 :-P – 2008-09-19 19:55:51

你必须在HTML中做到这一点吗？你可以使用谷歌图表吗？ http://code.google.com/apis/chart/#bar_charts – 2008-09-22 19:58:21

335

你说得对，CSS定位是要走的路。这是一个快速运行：

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

但是，您最有可能对position: absolute感兴趣，它将相对于容器定位元素。默认情况下，容器是浏览器窗口，但是如果父元素上设置了position: relative或position: absolute，那么它将作为父级定位坐标的父级。

为了证明：

<div id="container"> 
    <div id="box"> </div> 
</div>

#container { 
    position: relative; 
} 

#box { 
    position: absolute; 
    top: 100px; 
    left: 50px; 
}

在这个例子中，#box左上角是100像素下来，50px的左#container左上角的。如果#container没有设置position: relative，则坐标#box将相对于浏览器视图端口的左上角。

希望有所帮助。

来源

2008-09-19 20:01:06

您必须显式设置父容器的位置以及子容器的位置。做到这一点的典型方式是这样的：一个元素相对于最近的已定位祖先

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-19 19:50:53

绝对定位的位置。因此，将position: relative放在容器上，那么对于子元素，只要子元素具有position: absolute，则top和left将相对于容器的左上角。更多信息请参见the CSS 2.1 specification。

来源

2008-09-19 19:53:05 Jim

我知道我很晚但希望这有助于。

以下是位置属性的值。

静态
固定
相对
绝对

位置：静态

这是缺省值。这意味着元素将发生在它通常会发生的位置。

#myelem { 
    position : static; 
}

位置是：固定

这将设置的元件的位置相对于所述的浏览器窗口（视口）。即使页面滚动，固定位置的元素也会保留在其位置上。

（理想的情况下，如果你想在页面右下角的滚动到顶部的按钮）。

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

位置：相对于

要放置的一个元素的新相对于它的原始位置的位置。

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

以上CSS将#myelem元素30像素的左侧和30像素从它的实际位置的上方移动。

位置：绝对

如果我们想要一个元素被放置在页面的确切位置。

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

上述CSS将在位置30像素从顶部位置#myelem元件和从在页面的左侧300像素和其将与页滚动。

最后...

位置相对+绝对

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

#container { 
    position : relative; 
} 

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

我们可以在上述图像中看到的＃DIV-2元件被定位在#container的元件内部的右上角。

GitHub：您可以找到上述图片here和CSS here的HTML。

希望这tutorial帮助。

来源

2017-06-29 08:09:41 yusufshakeel

使用CSS定位相对于其容器的HTML元素

回答

相关问题