相对于其容器定位元素

Posted 2023-03-05

【中文标题】相对于其容器定位元素

【英文标题】：Position an element relative to its container

【发布时间】：2010-09-11 10:07:48

【问题描述】：

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

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

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

跨浏览器（理想情况下没有太多浏览器黑客攻击） 以 Quirks 模式运行 尽可能清晰/干净，便于自定义 尽可能不使用 javascript。

【问题讨论】：

你必须用 HTML 来做吗？你能用谷歌图表代替吗？ code.google.com/apis/chart/#bar_charts

【参考方案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 的左上角将比#container 的左上角向下 100 像素和向左 50 像素。如果#container 没有设置position: relative，则#box 的坐标将相对于浏览器视口的左上角。

【讨论】：

这个页面很好地展示了这种现象：css-tricks.com/absolute-positioning-inside-relative-positioning

【参考方案2】：

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

所以如果你想将你的子元素定位到父容器的左上角，你应该这样做：

.parent 
  position: relative;
 

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

阅读this article，您将受益匪浅。希望这会有所帮助！

【参考方案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 的位置，它会随着页面滚动。

最后……

相对位置 + 绝对位置

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

#container 
    position : relative;


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

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

GitHub：你可以找到上面图片的HTMLhere和CSShere。

希望tutorial 有所帮助。

【参考方案4】：

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

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


div.child
    position: absolute;
    left: 10px;
    top: 10px;

【讨论】：

如果相对定位的元素为零，则无需提供 top 或 left 属性值。

适用于现有浏览器但未在规范中定义。

规范中肯定有定义。阅读第 9.4.3 节并检查属性的初始值。

9.4.3 表示 left 和 top 的初始值为'auto'。对“自动”值的定义有点复杂，我一直无法完全理解它们。不过，如果你说它最终为零，我会相信你的话。

【参考方案5】：

绝对定位相对于它最近的定位祖先定位元素。所以把position: relative放在容器上，然后对于子元素，top和left将相对于容器的左上角，只要子元素有position: absolute。更多信息请访问the CSS 2.1 specification。