我可以在 HTML 标签之间留出空格而不破坏相对定位吗？

发布于 2024-08-02 02:10:18 字数 935 浏览 7 评论 0原文

两个标记之间有一个换行符，并且它们在文档中缩进以实现良好的格式设置。

但我使用相对定位和 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>

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

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

我能完成这个工作吗？

编辑 - 更多信息

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

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

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

我不知道如何以其他方式完成此任务

原文

There is a line break between two <img> tags, and they are indented in the document for nice-formatting.

But I'm using relative positioning and z-order to place one image (part of the layout) overtop of another.

I have something like this

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

the line break after the first <img> tag adds a space, and then when I set the relative left position of the second <img> tag, that space is taken into consideration and it's set just a little bit to the right of the first image.

I don't want to put them on the same line, making the lower image tag a background isn't an option (it has to be sized), and fiddling with the relative position is out of the question (I'm assuming spaces will be different sizes on different browsers/systems).

Can I make this work?

edit -- more info

The spacing is throwing off the relative positioning. Is there no way to just position them absolutely, but to the left and top of another element, which has static positioning?

anyways, the layout in its current state has an image overlapping another image. The overlapped image is a div background and the piece of layout is an image in the div.

I need to change the overlapped image when a link is clicked (a thumbnail of an image is clicked, and a larger version appears in the overlapped image). But the images are all different sizes, larger than the default div background image. I can't resize a div background so it has to be an image. But the problem is getting one image to overlap another. They want me to also fade between images, so I need two images, stacked on top of each other (with the top one fading in and out to a bottom one), plus the edge of the layout over top of those.

I don't know how to accomplish this any other way

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜心 2024-08-09 02:10:18

那里的 z 顺序是什么？它的 z 索引。
设计中的换行将如何改善一切。
据我所知，网站布局/设计中的 z-index 和换行符是您最不应该使用的东西。您需要的是适当的边距和填充。在开始使用 z-index 之前，另请阅读有关负边距的信息。

检查这些：
http://www.barelyfitz.com/screencast/html-training/css /定位/
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/

回复收藏 0 原文

送你一个梦 2024-08-09 02:10:18

这就是最终对我有用的内容：

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

这可能不是最好的方法，但它有效，而且我面临着完成这个项目的压力，所以现在必须这样做。

This is what ended up working for me:

I just placed the top image (a part of the layout, sort of an edge which creeps over onto the image in one part) in the layout like normal (left aligned in a statically sized div, which is in the center of the page).

Then I made the other two absolutely positioned, at just 0,0 (but it doesn't matter where).

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

then using a bit of JavaScript, I fixed the position of the other two images:

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

it might not be the best way to do it, but it works and I'm being pressured for this project to be finished, so it will have to do for now.

回复收藏 0 原文

热情消退 2024-08-09 02:10:18

卡森，

标签已弃用。（据我所知）。我相信，如果您将 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

将上面的 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，它也能正常工作。

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

Carson,

The <center> tag is deprecated.(to my knowledge). I believe if you since you've set the div to width:686px, you can use margin:0 auto.

For what I believe is the effect you're attempting, maybe this jQuery slideshow tutorial will help.

It uses an unordered list made horizontal, makes only one list visible at a time, and scrolls through them automatically. You can change the sliding feature to 'fade' in the slideshow.js like so:

 $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

change the above fx:'scrollLeft' to fx: 'fade' so it'll look like this:

$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'

Also, after building this, use your images as list items, and replace the pagination texts in the tutorial to the relevant image thumbnails.

You can tinker with the speeds & time out & it also works well without javascript enabled.

Also, if this doesn't help you achieve the effect you want, can you make a sketch? The use of 'overlapping' is a bit confusing.

回复收藏 0 原文