0

我真的被困在这里了...

我有一个带有中央布局的站点布局（大约 922 像素宽度，位于页面中心）...我有一个位于左上角的小徽标，但它在中央设计左侧约 10 像素处. 如果你能想象，它有点突出在设计的左侧......

现在，有人告诉我绝对定位可以实现这一点。但是，如果设计本身位于页面中心，我看不出徽标将如何与绝对定位一起使用。我认为这是为了确保它在 IE6 中工作...我尝试将徽标浮动在中央标题中，然后应用负边距margin-left: -10px;确实有效，但我读过这在 IE6 中不起作用。

4

3 回答 3

1

在容器 div 上设置“位置：相对”。

<style type="text/css">
    div.page {
        position: relative;
        margin: 0 auto;
        width: 922px;
    }
    div.page img.logo {
        position: absolute;
        left: -10px; top: 0;
    }
</style>


<div class="page">
    <img class="logo" ... />
</div>

虽然..我宁愿让它在没有绝对定位的情况下工作。

于 2009-04-01T20:43:17.600 回答
1

没有一段代码很难说，但这可能是你的元素从哪里获得它的“绝对”定位的问题。“绝对”是用词不当。它的真正意思是“绝对......相对于最近的定位父母”。因此，如果在您的设计中，您没有带有 css“位置”样式的父元素，它将从 body 元素中获取其位置（根据您的浏览器，它可能有一些边距/填充）。

添加位置：相对；到您想成为“最外层”容器的元素将允许您在其中的项目上指定位置：绝对，并从那里指定您的确切坐标。

于 2009-04-01T20:48:55.620 回答
1

当您绝对定位您的标志时，它需要相对于某物放置。那东西通常是视口边缘。如果徽标位于相对定位的元素内，则它将相对于该元素定位。所以答案是使您的页面居中 divdisplay:relative;使徽标始终与页面对齐，而不是与浏览器窗口的边缘对齐。这是一个例子：

的HTML：

<div id="centeredpage">
   <img id="logo"... />
</div>

CSS：

body {
   text-align:center;
}
#centeredpage {
   width:922px;
   margin:0 auto;
   text-align:left;
   position:relative;
}
#logo {
   position:absolute;
   top:0;
   left:-10px;
}

我希望这会有所帮助。

于 2009-04-01T23:50:49.037 回答