html - 是否可以将图像固定到具有流畅布局的网页上？

Question

我正在构建一个基于 Fluid 960 GS System 的网站.我想在页眉中覆盖一个图像，以便它相对于页眉图像保持不变，而不会破坏页眉本身。如果我使用以下 CSS，我就成功了一半:

.imgFloat {
    position:absolute;
    left:400px;
    top:-2px;
    z-index:1;  
}

<div class="grid_16">
    <h1 id="branding">
        <a href=""><img src="img/logo.png" /></a>
        <img src="img/float.png" class="imgFloat" />
    </h1>
</div>

此代码的唯一“问题”(不是真的，因为 CSS 正在做它应该做的事情)是图像保持原样，而不是像我想要的那样远离标题图像 x 像素。

如果我将位置更改为相对位置，它会破坏标题的大小，从而破坏标题本身的布局，但它会按照我想要的方式定位图像。

我可以应用一个快乐的中等 CSS“技巧”来实现这个结果吗？

提前致谢!

Answer 1

你只需要确保绝对定位的元素在你希望它相对的元素内。然后只需将 position: relative 添加到该元素即可。

所以:

tag(position:relative)
  ag(position:absolute; left:2px)

应该可以

我只是猜测，因为您显示的代码不够详细；)

更新:

#branding {position:relative}

.imgFloat {
    position:absolute;
    left:400px;
    top:-2px;
    z-index:1;  
}