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时，它意味着它根据原点修改位置，原点就是它在正常流程中定位的位置（静态）。然而，相对也做了一些特殊的事情，并告诉浏览器它的所有子节点都将根据这个元素定位，无论是使用相对还是绝对。

绝对定位 当一个物体定位absolute时，它会根据其最近的非static定位祖先的位置放置。如果没有，则使用<body>确定其位置。如果其兄弟姐妹或祖先未定位absolute，则可能会破坏文档流。如果从最外面的最顶层节点到当前节点的所有位置都是absolute，那么它将保持流量。

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

您问题的多种解决方案 首先，如其他人所述，您可以将position:relative添加到#header。如上所述，它将使您的标题成为最近的非static祖先，并将使用它和确定位置的基础。这对你来说可能并不理想，因为你是一个被录取的新手，这个absolute很容易打破你可能会遇到兄弟元素的足够流量。

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

另一种选择是将#header更改为position:absolute。但是，除非您将所有父元素和兄弟元素都更改为position:absolute，否则这可能会改变所有事物的交互方式。此外，您可能无法访问祖先定义的宽度和高度，因为只有它们位于同一个流中才会继承。这是您的第二个最佳情况，因为您可以简单地添加规则body * { position:absolute; }，所有这些都将保留在您的流程中。但是，它忽略了真正教你学习定位所需的东西，而且只是一个拐杖。

希望这有帮助， FuzzicalLogic

Answer 2

CSS定位可能很难理解，但一旦你这样做，你会发现它非常有用。

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

基本上，要将需要锁定的任何内容定位到父元素或容器元素，父元素或容器元素本身也需要定位（绝对或相对，无关紧要），这称为定位上下文。如果一个绝对定位的元素找不到自己定位的父元素或容器，那么它将使用`body作为定位上下文。

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

将position:relative添加到#header会允许.logo绝对地从#header元素的左上角定位。

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

Answer 3

定义位置：CSS中的绝对值将有问题的元素从文档流中取出。

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

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

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

Answer 4

我会疯狂地猜测你的徽标位于标题分区内，但你的标题是静态定位的。因此，您的徽标未根据标题定位，而是根据文档的窗口定位。因此，在所有情况下，它将从文档的左上角向右移动20px并向下移动20px。

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

CSS定位保证金麻烦

4 个答案: