Member Avatar for emilio

i am trying to use span option to place an image:

<SPAN style="position: absolute; top: 220px; left: 371px; width: 320px; height: 320px">
      <IMG SRC="t3.JPG" >
      </SPAN>

the problem that this image is hiding other images. is there a way to make this image "behind" other images except painting them on this image?

  • 3 Contributors
  • 3 Replies
  • 120 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Both answers already posted point in the right directions. is correct that stacking order is controlled with z-index, and is right that using a CSS background often avoids stacking headaches. A few practical rules and quick fixes will usually solve the problem:

  • z-index only applies to positioned elements (position: absolute / relative / fixed).
  • A positioned element with a z-index (or certain CSS properties like transform/opacity in modern browsers) creates a stacking context; children are stacked inside that context and cannot escape it. That is the common source of “z-index not working.”

Quick examples (do not repeat your original markup):

<div class="wrap">
  <img class="bg" src="background.jpg" alt="">
  <div class="content">...front images/content...</div>
</div>

.wrap { position: relative; }
.wrap .bg { position: absolute; top: 10px; left: 10px; z-index: 0; }
.wrap .content { position: relative; z-index: 10; }

If the image is purely decorative, the pseudo-element/background approach is cleaner:

.container { position: relative; }

.container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('decorative.jpg') center/contain no-repeat;
  z-index: 0;
  pointer-events: none; /* may not work in very old IE */
}

.container > * { position: relative; z-index: 10; }

Troubleshooting checklist:

  • Inspect computed position and z-index in DevTools.
  • Look for a positioned parent (or a transform/opacity) that creates a stacking context; either adjust/remove that parent z-index or move the element in the DOM so it shares the same stacking context as the items you want it behind.
  • Avoid relying on large negative z-index values; they can put the element behind the page background in some browsers.
  • For decorative art, prefer CSS backgrounds or ::before and give <img> an empty alt="" only when it truly is non-informational.

For : try adding explicit position and z-index as above or move the image into a background/pseudo-element if it’s decorative — that usually fixes the “hiding other images” issue.

Recommended Answers

All 3 Replies

Member Avatar for buddylee17

Yes, it's done with the css z-index attribute. The highest z-index goes on top. Read more .

Member Avatar for emilio

great.
thank you

Member Avatar for MidiMagic

Note that the z-index is not yet well implemented in all browsers.

Try using the image as the background image instead.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.