Member Avatar for bsewell

Hi All,
I have a question. I have a div, which has an image slideshow using innerfade. I have another div which overlaps this div which contain some text. Basicly, the slideshow is working but I want it to be in the background so that I will be able to see the text in the other div. Right now, the slideshow goes over the text so I can't read it.

Any ideas for any code that would achieve this?

CHeers,

  • 1 Contributor
  • 1 Reply
  • 51 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by bsewell

Dani AI

Generated

Nice one, — glad you fixed it. A few practical tips so the slideshow reliably stays behind other content and to help if this pops up again.

z-index only affects positioned elements (position: relative/absolute/fixed/sticky). A simple pattern is to give the slideshow a low z-index and the text overlay a higher one:

.slideshow {
  position: relative; /* or absolute/fixed depending on layout */
  z-index: 0;
}

.text-overlay {
  position: relative; /* or absolute if you want it over the slideshow */
  z-index: 10;
}

Troubleshooting tips: use browser devtools to inspect computed z-index and see stacking contexts. Ancestors with transforms, opacity < 1, filters, or an explicit z-index can create a stacking context and prevent child z-index changes from having the expected effect. Avoid negative z-index unless you deliberately want the element behind the page background. If you need pointer events to pass through an overlay, consider pointer-events, but apply it carefully so text remains selectable and interactive.

Member Avatar for bsewell

Fixed. Used z-index in the div's CSS :)

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.