Home/ Questions/Q 313569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:07:12+00:00

There is a line break between two <img> tags, and they are indented in

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What is that z-order there? its z-index.
    And how will line break within design improve anything.
    As i see things z-index and line breaks in website layout/design are the last things you should use. What you need is proper margins and paddings. Also read about negative margins before you start using z-index.

    Check these out :
    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/

    • 0