绝对位置和相对位置答案

【问题标题】：Position absolute and position relative绝对位置和相对位置
【发布时间】：2013-06-19 16:46:12
【问题描述】：

我对 CSS 中的绝对位置和相对位置感到困惑。

<div id="container" style="position:"relative">
  <button style="position:"absolute"; left:10px;" >
</div>

在上面的示例中，当我将位置设置为绝对位置并将左侧设置为 10px 到按钮时，意味着它不会从浏览器窗口中获取位置。取而代之的是，它从父 div（容器）获取位置，因为容器位置是相对的。为什么？

当我将绝对位置设置为任何元素时，它只会从浏览器窗口中获取位置。为什么它检查父元素然后定位。

当我设置相对于任何元素的位置时，意味着它将基于父元素定位。

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>

在上面的例子中，第三段将被定位在距离容器元素左侧 3em 处。

我研究了以下链接。

absolute → 从浏览器窗口获取位置

relative → 从元素的父元素获取位置

【问题讨论】：

你是对的。如果将绝对定位元素放在相对定位元素内部，则内部元素定位基于父元素。不完全确定为什么会出现这种情况，但这就是它的工作原理。还要记住，绝对定位会将对象从流中取出；相对父级本质上只是帮助建立 0,0 坐标。

【解决方案1】：

绝对位置元素相对于第一个位置不是静态的父元素定位。如果没有找到这样的元素，则包含块是 html 元素。

【讨论】：

【解决方案2】：

绝对

相对于 relative 或 absolute 的第一个父元素（默认为 html/浏览器窗口）定位 - 这意味着拥有 relative 父元素会导致所有子元素在使用 @ 时相对于该元素定位987654325@

亲戚

相对于它的原始静态位置定位（不涉及父级） - 可用于将元素从其当前位置略微移动，而不影响元素的布局

已修复

根据您的使用要求，另一个选项是position:fixed，它使项目相对于浏览器窗口定位，而不管父样式如何（对于模态窗口很有用，因为元素保持在原位，即使在滚动时也是如此）

【讨论】：