Question

两个<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>标记的相对左侧位置时，会考虑该空格并将其设置为一点点位于第一张图片的右侧。

我不想把它们放在同一条线上，使得较低的图像标签背景不是一个选项（它必须是大小），摆弄相对位置是不可能的（我' m假设不同浏览器/系统上的空格大小不同。）

我可以做这个吗？

编辑 - 更多信息

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

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

我需要在单击链接时更改重叠的图像（单击图像的缩略图，并在重叠的图像中显示更大的版本）。但是图像都是不同的尺寸，大于默认的div背景图像。我不能调整div背景的大小，所以它必须是一个图像。但问题是让一个图像与另一个图像重叠。他们希望我也在图像之间淡入淡出，所以我需要两个图像，堆叠在一起（顶部一个淡入和淡出一个底部），加上布局的边缘超过那些。

我不知道如何以任何其他方式实现这一目标

Answer 1

那是什么z顺序？它的z指数。设计中的换行如何改善任何事情。正如我所看到的，网站布局/设计中的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/

Answer 2

最终为我工作的是：

我只是在布局中放置了顶部图像（布局的一部分，一部分在一个部分中爬过图像），就像正常一样（左边对齐一个静态大小的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;
}

它可能不是最好的方法，但是它有效并且我正在被迫完成这个项目，所以它现在必须要做。

Answer 3

卡森，

不推荐使用<center>标记。（据我所知）。我相信如果你将div设置为宽度：686px，你可以使用margin：0 auto。

对于我认为你正在尝试的效果，也许这个jQuery slideshow tutorial会有所帮助。

它使用水平无序列表，一次只显示一个列表，并自动滚动它们。你可以在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

ë

将上面的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'

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

你可以修改速度＆amp;超时＆amp;它也适用于没有启用JavaScript的情况。

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

Answer 4

将display: block;应用于img代码的样式。

我可以在HTML标签之间建立空格而不是搞砸相对定位吗？

编辑 - 更多信息

4 个答案: