z-index problems

[jundo12]

if i understand the documentation on z-index, you must have a higher z-index number to appear over top of other items with lesser z-index numbers, correct? for example "style=z-index: 9999;" should appear above z-index:9998; ?
and does it matter if its inline or in the head? cause the first example is inline, whereas the second is in the head. for some reason, the first one appears where it should but pushes the second one down below it, instead of layering over top of it. the first example (9999) is absolute, whereas the second example (9998) is relative. does that matter? cause when i set the second one to be absolute,it still didn't work. the 9999 example just pushed the 9998 example down the page instead of overlaying it

[jundo12]

i even tried to adjust opacities, since i read you can effect z-index stacking order with opacity, but that didn't seem to help either. i'm seriously considering just resorting to putting the 9998 example in an iframe so i can have full control of the parent browser window which would contain the 9999 example, but it's silly to have to go to that extreme when the problem is probably just my lack of knowledge on how z-indexing works in a complex environment (the html/script/css of this page has a mix of z-indexes and opacity settings that are like a maze to decode). it probably has something to do with what is considered the parent and what is considered the child/children . but it's a huge tangle i'm having trouble determining who is what. on top of that (pun!), it's possible there may be a setting in the javascript that's overriding changes in that regard.

p.s. it's a full window display, or i wouldn't consider an iframe to solve it. lol . if it was just a couple of small items i wouldn't even think about using iframe

[Beverleyh]

We'd need to see the page in order to offer suggestions. In the meantime, I'll leave this link here http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ It may be one you've already read but it might offer further insight or be useful to others looking in on this thread in future.

[jundo12]

this is not my work, she just offered it for free for any purpose, and i'm trying to modify it
this is the css file

.zt-container{
width:100%;
height:700px;
position:relative;
overflow:hidden;
margin:20px auto;
background:#000;
border:1px solid #000;


}
img.zt-current{
position:absolute;
display:none;
}
img.zt-temp{
position:absolute;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.zt-tag{
position:absolute;
z-index:10;
border:0px solid #FD8535;
background: url(../images/marstag.png);
background-repeat:no-repeat;
width:8%;
height:auto;
cursor:pointer;


}



.zt-tag-back{
width:7%;
height:7%;
left:94.6%;
bottom:47%;

background:#000 url(../images/back.png) no-repeat center center;

}
.zt-loading{
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
margin:-25px 0 0 -25px;
opacity:0.8;
z-index:9999;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background:#000 url(../images/ajax-loader.gif) no-repeat center center;

[Beverleyh]

We need the markup too I'm afraid - can you post a link to the actual page?

If you are unable to provide a link to a live web page on your own server, the following services can be very useful in the sense that they allow live edits (much easier for the folks providing help as we don't have to create web docs on other folks behalf). live edits = more convenient = faster replies ;)

- http://jsbin.com/
- https://jsfiddle.net/
- http://codepen.io/pen/

[jundo12]

surely, here it is (she's a brilliant experimental coder)
http://tympanus.net/Development/ImageZoomTour/index.html

i want to put an absolute div over the tour window, that contains an overlay

[Beverleyh]

OK - show us what you have so far with that. We cant help troubleshoot the original demo - we need to see your changes that demonstrate whatever problem you're having, so for that you'll need to recreate a separate demo page with your changes included and possibly highlighted.

If you just want to insert your own div, insert it after all the demo markup so that it comes last in the source order. And maybe try absolutely positioning it?

I'm not really sure what you're trying to do without seeing an example. Maybe this?

<div style="position:absolute;z-index:999;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.5)"></div>

[jundo12]

I'm not really sure what you're trying to do without seeing an example. Maybe this?

<div style="position:absolute;z-index:999;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.5)"></div>

oh that did it! thanks! i mean the z-index had to be set to 9999, and in the css, i had to set the loading thing to 9998, but it worked. but why at the bottom of the page? i thought it had to contain the other stuff. yet it does, even without surrounding the other stuff with the div lol this stuff is complicated

[jundo12]

i have gotten most of it to be responsive, except the little rectangles that are called zt-tags in the css. when i resize the window, they go down the window out of sight. any solution for that? the images resize just fine, but those little rectangular things just slide out of sight when window is resized. as you can see i tried it with the first tag by using percentages instead of px. it just slides away like the rest of them.

here's the html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Zoom Tour with jQuery</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Image Zoom Tour with jQuery" />
<meta name="keywords" content="jquery, zoom, tour, images, zoom in, zoom out, plugin, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' />


<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("../sounds/thumpy.mp3")
var clicksound=createsoundbite("../sounds/thumpy.mp3")

</script>


<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">








<style>
img {max-width:100%;
height: auto;
}
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}


</style>
</head>
<body bgcolor="black"><font color="#9799BF" size=4em><b>



<div class="container">

<div id="zt-container" class="zt-container">
<div class="zt-item" data-id="zt-item-1">
<img class="zt-current" src="images/image3.png" style='width:100%;'/>

<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="1005" data-speed="2600" data-delay="60" style="top:57.9%;left:7.8%;width:20%; height:20%;" onmouseover="mouseoversound.playclip()">Mercury</div>

<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="1005" data-speed="2600" data-delay="60" style="top:64%;left:19%;width:87px; height:81px;">Venus</div>

<div class="zt-tag" data-dir="1" data-link="zt-item-4" data-zoom="1005" data-speed="2600" data-delay="60" style="top:67%;left:32%;width:87px; height:81px;" onmouseover="mouseoversound.playclip()"">Earth</div>

<div class="zt-tag" data-dir="1" data-link="zt-item-5" data-zoom="1005" data-speed="2600" data-delay="60" style="top:68%;left:45%;width:87px; height:81px;"onmouseover="mouseoversound.playclip()" >Mars</div>

<div class="zt-tag" data-dir="1" data-link="zt-item-6" data-zoom="1005" data-speed="2600" data-delay="60" style="top:68%;left:59%;width:87px; height:81px;"onmouseover="mouseoversound.playclip()" >Jupiter</div>

<div class="zt-tag" data-dir="1" data-link="zt-item-7" data-zoom="1005" data-speed="2600" data-delay="60" style="top:65.1%;left:73%;width:87px; height:81px;"onmouseover="mouseoversound.playclip()" >Saturn</div>

<div class="zt-tag" data-dir="1" data-link="zt-item-8" data-zoom="1005" data-speed="2600" data-delay="60" style="top:58%;left:87%;width:87px; height:81px;" onmouseover="mouseoversound.playclip()">Neptune</div>



</div>
<div class="zt-item" data-id="zt-item-2">
<img class="zt-current" src="images/image3_1SAVEs.jpg"" style="width:100%;"/>
<div class="zt-tag" data-dir="1" data-link="zt-item-9" data-zoom="10" data-speed="850" data-delay="100" style="top:201px;left:544px;width:50px;height:30px;"></div>
<div class="zt-tag" data-dir="1" data-link="zt-item-10" data-zoom="2" data-speed="550" data-delay="0" style="top:155px;left:10px;width:150px;height:100px;"></div>
<div class="zt-tag" data-dir="1" data-link="zt-item-11" data-zoom="15" data-speed="850" data-delay="0" style="top:15px;left:10px;width:90px;height:50px;"></div>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="15" data-speed="700" data-delay="0"></div>
</div>
<div class="zt-item" data-id="zt-item-3">
<img class="zt-current" src="images/image3_3.jpg" style='width:100%;'>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="10" data-speed="650" data-delay="20"></div>
</div>
<div class="zt-item" data-id="zt-item-4">
<img class="zt-current" src="images/image3_2.jpg" style='width:100%;'>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="2" data-speed="550" data-delay="0"></div>
</div>
<div class="zt-item" data-id="zt-item-5">
<img class="zt-current" src="images/image3_5.jpg" style='width:100%;'>
<div class="zt-tag" data-dir="1" data-link="zt-item-6" data-zoom="8" data-speed="650" data-delay="0" style="top:330px;left:238px;width:40px;height:30px;"></div>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="15" data-speed="700" data-delay="0"></div>
</div>
<div class="zt-item" data-id="zt-item-6">
<img class="zt-current" src="images/image3_6.jpg" style='width:100%;'/>
<div class="zt-tag" data-dir="1" data-link="zt-item-7" data-zoom="2" data-speed="550" data-delay="0" style="top:10px;left:109px;width:240px;height:180px;"></div>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="8" data-speed="650" data-delay="0"></div>
</div>
<div class="zt-item" data-id="zt-item-7">
<img class="zt-current" src="images/image3_7.jpg" style='width:100%;'/>
<div class="zt-tag" data-dir="1" data-link="zt-item-8" data-zoom="3" data-speed="550" data-delay="0" style="top:377px;left:152px;width:125px;height:70px;"></div>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="2" data-speed="550" data-delay="0"></div>
</div>
<div class="zt-item" data-id="zt-item-8">
<img class="zt-current" src="images/image3_8.jpg" style='width:100%;'/>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="3" data-speed="550" data-delay="0"></div>

</div>

</div>



</div>







<object type="application/x-shockwave-flash" data="player_mp3.swf" width="1" height="1">
<param name="movie" value="/player_mp3.swf" />
<param name="bgcolor" value="#4CB1A8" />
<param name="FlashVars" value="mp3=../sounds/data3.mp3&amp;loop=1&amp;autoplay=1" />
</object>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.zoomtour.js"></script>
<script type="text/javascript">
$(function() {
$('#zt-container').zoomtour();
});
</script>



<div style="position: absolute; left: 0%; top:0%;"><img src="../over.png" style='width:100%; z-index: 9999'></div>

[Beverleyh]

Live page links please. If you'd like help, you need to make it easy for us to help you ;)

I'll reiterate...

If you are unable to provide a link to a live web page on your own server, the following services can be very useful in the sense that they allow live edits (much easier for the folks providing help as we don't have to create web docs on other folks behalf). live edits = more convenient = faster replies

- http://jsbin.com/
- https://jsfiddle.net/
- http://codepen.io/pen/

[jundo12]

Live page links please. If you'd like help, you need to make it easy for us to help you ;)

I'll reiterate...

- http://jsbin.com/
- https://jsfiddle.net/
- http://codepen.io/pen/

oh those are helpful. i've seen many of them. i'll have to think about it. it's for a game, and i dunno if i just wanna stick it out there quite yet. sorry about that. i'll figure this out somehow lol

[dixalex]

oh those are helpful. i've seen many of them. i'll have to think about it. it's for a game, and i dunno if i just wanna stick it out there quite yet. sorry about that. i'll figure this out somehow lol

Hello jundo12, when dealing with z-index, you must always give a display CSS attribute to the containers that you which to have the z-index functionality. Position relative might help too but definitely have a display of like block.

[Beverleyh]

You are mistaken dixalex. Z-index only works when position is set - to either absolute, relative or fixed.

The CSS display property does not affect z-index directly, although display: none; will remove the element from the document.

[dixalex]

You are mistaken dixalex. Z-index only works when position is set - to either absolute, relative or fixed.

The CSS display property does not affect z-index directly, although display: none; will remove the element from the document.

Hi Beverley, thanks for the correction and sorry for the confusion.

Regards,
Alex