0

两个标签之间有一个换行符<img>，它们在文档中缩进以便格式化。

但我使用相对定位和 z 顺序将一个图像（布局的一部分）放在另一个图像之上。

我有这样的东西

<img style="position: relative; z-index: -1;" width=a height=b>
<img style="position: relative; z-index: 0; left: -a" width=x height=y>

第一个标签后的换行符<img>添加了一个空格，然后当我设置第二个<img>标签的相对左侧位置时，该空格被考虑在内，它被设置在第一个图像的右侧一点点。

我不想将它们放在同一行，使较低的图像标签成为背景不是一个选项（它必须调整大小），并且摆弄相对位置是不可能的（我假设空格在不同的浏览器/系统上会有不同的大小）。

我可以做这个工作吗？

编辑——更多信息

间距正在摆脱相对定位。有没有办法将它们绝对定位，而是定位到另一个具有静态定位的元素的leftand ？top

无论如何，当前状态下的布局有一个图像与另一个图像重叠。重叠的图像是 div 背景，而布局是 div 中的图像。

单击链接时，我需要更改重叠的图像（单击图像的缩略图，重叠的图像中会出现较大的版本）。但图片大小不同，比默认的 div 背景图片大。我无法调整 div 背景的大小，因此它必须是图像。但问题是让一张图像与另一张图像重叠。他们还希望我在图像之间淡入淡出，所以我需要两张图像，堆叠在一起（顶部的一张淡入淡出到底部的一张），再加上布局的边缘在上面。

我不知道如何以其他方式完成此操作

4

4 回答 4

3

那里的z顺序是什么？它的 z-index。以及设计中的换行符将如何改善任何事情。正如我所见，网站布局/设计中的 z-index 和换行符是您应该使用的最后一件事。您需要的是适当的边距和填充。在开始使用 z-index 之前，还要阅读有关负边距的信息。

看看这些： http ://www.barelyfitz.com/screencast/html-training/css/positioning/ http://www.elated.com/articles/css-positioning/ http://www.smashingmagazine.com/ 2009/07/27/the-definitive-guide-to-using-negative-margins/ http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

于 2009-08-10T20:19:41.160 回答
0

这最终为我工作：

我只是像正常一样将顶部图像（布局的一部分，一种边缘爬到图像的一部分上）放置在布局中（以静态大小左对齐，div位于页面中心）。

然后我让另外两个绝对定位，只有 0,0（但在哪里并不重要）。

<center>
    <div style="width: 686">
        <img id="ed" src="./edge.jpg">
        <img id="bg" style="position: absolute; left: 0; top: 0; z-index: -2;">
        <img id="fg" style="position: absolute; left: 0; top: 0; z-index: -1;">
    </div>
</center>

然后使用一点 JavaScript，我固定了其他两个图像的位置：

function fixImages() {
    var imageEdge = document.getElementById('ed');
    var foregroundImage = document.getElementById('fg');
    var backgroundImage = document.getElementById('bg');

    foregroundImage.style.left = imageEdge.style.left;
    foregroundImage.style.top = imageEdge.style.top;

    backgroundImage.style.left = imageEdge.style.left;
    backgroundImage.style.top = imageEdge.style.top;
}

这可能不是最好的方法，但它确实有效，我迫于压力要完成这个项目，所以现在必须这样做。

于 2009-08-10T20:57:03.863 回答
0

卡森，

该<center>标签已弃用。（据我所知）。我相信如果你已经将 div 设置为 width:686px，你可以使用 margin:0 auto。

对于我认为您正在尝试的效果，也许这个jQuery 幻灯片教程会有所帮助。

它使用一个水平的无序列表，一次只显示一个列表，并自动滚动它们。您可以在 slideshow.js 中将滑动功能更改为“淡出”，如下所示：

 $slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
        tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'scrollLeft',   // the slide effect to us

e

将上面的 fx:'scrollLeft' 更改为 fx: 'fade' 所以它看起来像这样：

$slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
        tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'fade',   // CHANGED TO 'FADE'

此外，在构建此之后，将您的图像用作列表项，并将教程中的分页文本替换为相关的图像缩略图。

您可以修改速度和超时，并且在不启用 javascript 的情况下也可以正常工作。

另外，如果这不能帮助你达到你想要的效果，你能画个草图吗？“重叠”的使用有点令人困惑。

于 2009-08-13T05:53:05.217 回答
-1

适用display: block;于您的img标签样式。

于 2009-08-10T20:12:24.327 回答