CSS 定位边距问题

Question

我不确定如何使用 css 定位元素，因为当我使用如下方法时，每当我调整浏览器大小时，元素都会保留在同一位置，而不是我希望它们位于调整大小的文档上的位置。请你告诉我我做错了什么吗？

.logo {
    left: 20px;
    top: 20px;
    position: absolute;
}

#header h1 {
    margin-top: 20px;
    margin-left: 500px;
    color:  rgb(127, 127, 126);
    line-height: 0px;
}

请拉一把小提琴 - http://jsfiddle.net/hHGRc/

Answer 1

在 (X)HTML DOM 中，CSS 识别四种定位类型。默认情况下，HTML 中的每个元素都是静态定位的。这意味着它根据它在正常流程中出现的位置进行定位。

相对定位
当对象相对定位时，意味着它根据原点修改位置，即它在正常流（静态）中的定位位置。然而，Relative 还做了一些其他特殊的事情，并告诉浏览器其所有子元素将根据此元素定位，无论使用相对还是绝对。

绝对定位
当对象被绝对定位时，它会根据其最近的非静态定位祖先的位置进行放置。如果没有，则它使用 来确定其位置。如果它的同级或祖先没有绝对定位，这有可能破坏文档流。如果从最外层顶部节点到当前节点的所有节点都被绝对定位，那么它将保持流程。

固定定位
这会将元素从流中取出并根据 Window 对象定位该对象。这意味着无论文档的滚动状态、大小或任何其他属性如何，它都将始终出现在该位置。 （这就是获得随你滚动的对象的方法）。

针对您的问题提供多种解决方案
首先，正如其他人所描述的，您可以将 position:relative 添加到 #header 中。正如上面所解释的，它将使您的标头成为最近的非静态祖先，并将使用它和确定位置的基础。这对您来说可能并不理想，因为您是一名公认的新手，而这个 absolute 可能很容易破坏足够的流程，使您可能会在处理同级元素时遇到困难。

作为替代方案，您可以将徽标从 position:absolute 更改为 position:relative。这将使您的徽标保留在流程中，但根据徽标在文档流程中自然出现的位置移动徽标。除非您在 #header 中使用浮动，否则这可能就是您想要的，因为它 a) 保持流程，b) 允许使用子元素 floats 而不丢失流程，c)实现您的理想定位，d) 保留父元素的继承（当它很重要时）。

另一种选择是将#header更改为position:absolute。但是，这可能会改变一切交互的方式，除非您将所有父元素和同级元素更改为 position:absolute。此外，您可能无法访问祖先定义的宽度和高度，因为它们只有在同一流中时才会被继承。这是对您来说第二好的情况，因为您可以简单地添加规则 body * {position:absolute; } 并且一切都将与您保持一致。然而，它忽略了真正教你需要学习的关于定位的知识，而只是一个拐杖。

希望这有帮助，
模糊逻辑

Answer 2

在CSS中定义position:absolute会将相关元素从文档流中剔除。

将其视为层：最底层是文档（尽管并不总是如此，具体取决于 z-index！），最顶层是您定义为绝对定位的元素。

通过设置position:absolute，您已经告诉浏览器您将负责相对于文档（屏幕）的左上角定位元素。在上面，您已告诉浏览器将 #logo 放置在距离文档左侧 20 像素和距离顶部 20 像素的位置。当您调整浏览器视口的大小时，该元素将保留在该位置。

我认为您想要的是将元素定位在文档流中，而不使用绝对定位。这可以通过浮动、边距和填充的组合来实现。

Answer 3

CSS 定位可能很难正确理解，但一旦理解了，您就会发现它非常有用。

试试这个： http://www.barelyfitz.com/screencast/html-training /css/positioning/

基本上，要定位需要锁定到父元素或容器元素的任何内容，父元素或容器元素本身也需要定位（绝对或相对，并不重要）这就是所谓的定位 语境。如果绝对定位的元素找不到定位自身的父元素或容器，它将使用“body”作为定位上下文。

因此，在您的示例中，如果我要在没有看到您的 HTML 和更多 CSS 的情况下进行猜测，

则将 position:relative 添加到 #header 将允许 .logo 将其自身绝对定位在 #header 元素的左上角。

同样重要的是要记住，绝对定位会使元素脱离文档的正常流程。

Answer 4

我将进行大胆的猜测，并说您的徽标位于标题部分内，但您的标题是静态定位的。因此，您的徽标不是根据标题定位的，而是根据文档窗口定位的。因此，在所有情况下，它将到达距离文档左上角向右 20 像素、向下 20 像素的位置。

尝试在 #header 元素上设置 position:relative 。这将使标题保持在其始终出现的位置，并且徽标将使用标题框来查找其左侧和顶部位置，而不是浏览器窗口。