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;  
}

Answer 2

在包含.imgFloat元素的header元素上设置position: relative，该元素应该将绝对定位的元素锁定到包装器。

此外，您需要更改位置，因为左侧将相对于包装元素的0,0坐标。

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

2 个答案: