Member Avatar for davy_yg

Hello,

I basically trying to place texts on top of images.

I have this in css:

#bannernavtext {margin: 200px 0 0 750px; font-color:black; z-index:0; }

#nav li { float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav.jpg') no-repeat top; z-index:-1;}

#nav li.activeSlide a { /* background: #88f */ width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik.jpg') no-repeat top; z-index:-1;}

the banner text suppose to be on top of the navigation images correct ?

In actually, I do not see them on top the images, they are bellow the images.

  • 4 Contributors
  • 8 Replies
  • 125 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

Short diagnosis tied to the thread: the issue is almost always stacking-context/z-index interaction rather than "absolute vs relative" alone. posted absolute text and relatively positioned nav items; suggested a positioned wrapper and mentioned changing z-index. That advice is on the right track, but many slider scripts or CSS properties (CSS transforms, opacity less than 1, a positioned ancestor with its own z-index) create new stacking contexts and can trap slides above your overlay even if the overlay has a larger z-index. See MDN: Understanding z-index.

Practical troubleshooting and fixes:

  • Put images, nav and the overlay inside the same positioned wrapper so they share a stacking context.
  • Position the overlay with top/left (or right) when using position: absolute rather than relying on margin offsets.
  • Avoid negative z-index on nav; give the overlay a clear positive z-index (e.g. 100).
  • If a slider plugin adds transform, opacity, or its own z-index, either disable that behavior, place the overlay later in the DOM (so it paints last), or make the wrapper the stacking context and control z-index there.
  • Use browser devtools to inspect computed styles and to see which ancestor created the stacking context.

A minimal structure (conceptual example):

<div class="banner-wrap">
  <ul class="slides"> ... </ul>
  <ul class="nav"> ... </ul>
  <div class="overlay">Text1<br>Text2<br>Text3</div>
</div>
.banner-wrap { position: relative; width:600px; height:200px; }
.banner-wrap .overlay { position: absolute; top:20px; right:20px; z-index:100; }
.banner-wrap .slides, .banner-wrap .nav { position: relative; z-index:1; }

If it still sits underneath, inspect the slider elements for transform/opacity or runtime z-index changes and adjust the wrapper or DOM order accordingly. For reference on stacking contexts and z-index behavior see MDN z-index.

Recommended Answers

All 8 Replies

Member Avatar for JorgeM

feel free to post the relevant code to get a better understanding of the issue.

Member Avatar for davy_yg

This is the codes:

index.php

<div id="demos">
    <div id="slideshow" class="pics">
        <img src="images/banner1.jpg" width="600" height="200" />
        <img src="images/banner2.jpg" width="600" height="200" />
        <img src="images/banner3.jpg" width="600" height="200" />       
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>

<div id="bannernavtext">

Text1<br><br>
Text2<br><br>
Text3<br><br>

</div>
Edited by davy_yg
Member Avatar for PhilEaton

You might use absolute positioning within a relatively positioned container div. This would allow you to overlay your picture with text.

Member Avatar for davy_yg

I add the position:

    #bannernavtext {position: absolute; margin: 200px 0 0 750px; font-color:black; z-index:0; }

    #nav li {position: relative; float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav.jpg') no-repeat top; z-index:-1;}

    #nav li.activeSlide a { /* background: #88f */ position: relative; width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik.jpg') no-repeat top; z-index:-1;}

The text absolute and the images relative. The text still underneath the images.

Member Avatar for PhilEaton

If you put them both in a div container that is relatively positioned with auto width and height to fit the picture, then absolute position the text. That might do it.

Member Avatar for davy_yg

you mean how exactly? the text suppose to be on top of the navigation images.

like this:

 #container {position: relative; width: auto; height: auto;}

and place the navigation in side the container?

Member Avatar for davy_yg

I just tried it and it doesn't make any difference.

Member Avatar for lps

In my opinion, you never set you z-index to the image. Moreover, if it is a slider, maybe the js will made the image of z-index higher, therefore, why not setting a very high z-index to the nav?

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.