CSS定位边距问题

我不确定如何使用CSS定位元素，因为当我使用类似以下的方法时，无论何时调整浏览器大小，元素都保留在相同的位置，而不是我希望它们位于的位置调整大小的文件。请你能告诉我我做错了什么？！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/

来源

2011-10-20 max_

进入粗略，因为他们是全尺寸的文档在同一个地方。 –

@XcodeDev：也许你应该使用'％'而不是'px'？ – RichieHindle

@XcodeDev - 你为什么不把你的实际CSS和标记发布到某个地方，让人们可以看一看？试试jsFiddle。 –

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

相对定位 当对象被定位relative，这意味着它修改基于原点的位置，这是它会被定位在正常流动（静态）。但是，Relative也会做其他特殊的事情，并告诉浏览器它的所有孩子都将根据这个元素进行定位，无论是使用相对还是绝对。

绝对定位 当对象被定位absolute，它根据其最接近的非static定位的祖先的位置被放置。如果没有，那么它使用<body>来确定它的位置。如果它的兄弟姐妹或祖先没有被定位absolute，这有可能中断文档流。如果全部从最外层的顶层节点到当前节点定位absolute，则它将保持流量。

固定定位 这需要的元件从流，并根据窗口物体位置的对象。这意味着无论文档的滚动状态，文档大小还是其他属性，它都会始终显示在该位置。（这是你如何获得与你一起滚动的对象）。

您的问题 一是多的解决方案，如由他人描述，您可以添加position:relative到#header。它将像上面解释的那样，将你的标题放在最近的非祖先处，并将用它和确定位置的基础。这对你来说可能并不理想，因为你是一个被认可的新手，这个absolute可能很容易打破足够的流量，你可能会与兄弟元素斗争。

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

另一种选择是将#header更改为position:absolute。然而，这可能会改变一切交互的方式，除非您将所有父母和兄弟元素都更改为position:absolute。此外，您可能无法访问祖先定义的宽度和高度，因为如果它们处于相同的流程中，它们仅被继承。这对于您来说是第二好的情况，因为您可以简单地添加规则body * { position:absolute; }，并且所有条款都将保留在您的流程中。然而，它忽视了真正教会你需要了解定位的东西，而只是一个拐杖。

希望这有助于 FuzzicalLogic

来源

2011-10-20 16:46:27

CSS的定位可能会非常棘手正确理解，但一旦你做，你会发现它是非常有用的。基本上http://www.barelyfitz.com/screencast/html-training/css/positioning/

，以定位任何需要锁定到父或容器元件，所述父母或容器元件本身需要被定位，以及（绝对，或相对的，没有按”：

尝试此这是所谓的定位上下文。如果绝对定位的元素找不到定位自己的父容器或容器，则它将使用`body作为定位上下文。

所以，在你的例子，如果我是没有看到你的HTML多你的CSS的猜测，

加入position:relative到#header然后将允许.logo本身绝对与#header元素的左上角的位置。

同样重要的是要记住，绝对定位将元素从文档的正常流程中取出。

来源

2011-10-20 15:52:18

定义位置：CSS中的绝对值使问题中的元素超出文档流。

将此视为图层：最底层是文档（尽管并非总是，取决于z-index！），最上面的图层是您定义为绝对定位的元素。

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

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

来源

2011-10-20 15:52:31

我正在疯狂地猜测你的logo是在头部分区内，但是你的头部是静态放置的。因此，您的徽标不是根据标题进行定位，而是根据文档的窗口进行定位。所以它会在所有实例中位于文档左上角20px右侧和20px的位置。

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

来源

2011-10-20 15:57:50 animuson

CSS定位边距问题

回答

相关问题