Solved

Working with z-index and slider

Posted on 2009-04-13
13
310 Views
Last Modified: 2012-06-27
Hey, I am working on a project where I have a main bg image, that is going to be in front and then two other images that will slide using Coda Slider using jQuery.

I have it displaying properly but I cant get it to display behind my main image. Any thoughts on what I can do? Attached is my zip.

Thanks,

Ryan

UPDATE:

I also did read up on the CSS docs for z-index and I added z-index to my elements but nothing still, updated css:

#largeSlide{

	background-image: url("../images/full_back.png");

	background-repeat:no-repeat;

	height: 430px;

	width:950px;

	position:absolute;

	z-index:10;

}

/* Viewing window for the slider */

.stripViewer{

position: relative;

overflow:hidden;

width: 950px;

clear: both;

border: 15px solid #fff;

}

/* DIV to house all of the panels, long! */

.stripViewer .panelContainer{

position: relative;

left: 0; top: 0;

width: 100%;

z-index:1;

}
 

.stripViewer .panelContainer .day, .stripViewer .panelContainer .night{

	height: 178px;

	display: block;

	background-repeat:no-repeat;

	position:absolute;

	z-index:1;

}

.stripViewer .panelContainer .day{

background-image: url("../images/day_back.png");

}

.stripViewer .panelContainer .night{

background-image: url("../images/night_back.png");

}

.stripViewer .panelContainer .panel{

float:left;

position: relative;

width: 950px;

}

.stripViewer .PanelContainer .panel .panelWrapper{

padding: 20px;

}

Open in new window

0
Comment
  • 9
  • 4
13 Comments
 
LVL 4

Expert Comment

by:rafe_
Comment Utility
When layering elements, the z-index is down on the list of properties which take precedence.

An element with a position value of relative, fixed or absolute will ALWAYS sit on top of an element without it, no matter how much z-indexing you throw at it. In fact, the z-index property is ignored unless the positioning is relative, fixed or absolute.

There is no hierachy over relative and absolute positioning, but the elements which appear in the html last will be rendered on top, though this can be over-ridden with z-index is most instances.

However z-index is buggy in IE and even Firefox.

In IE up to and including 7 (dunno about 8 but noone uses that yet) then an element's z position is determined by the ancestor closest to the top. IE also does not support using inherit as a value.

In firefox anything with a negative z-index will be behind the body, whereas if it worked according to standards, a negative value would appear above the background and borders of the body, but behind all other ancestors.

Perhaps some of these problems relate to your code here and helps you out!
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
So regardless where I want to use z-index it needs:

relative
absolute
fixed

positioning? Is that correct? I have that back full_back.png with a transparent top part of the sky, then day_back.png/night_back.png to sit under it and slide in/out of place.

I still tried playing with it and making sure they have the correct values but nothing. Any thoughts?

Thanks,

Ryan
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
Below is my updated CSS
#largeSlide{

background-image: url("../images/full_back.png");

background-repeat:no-repeat;

height:430px;

width:950px;

position:relative;

z-index:10;

}

/* Viewing window for the slider */

.stripViewer{

position: relative;

overflow:hidden;

width: 950px;

clear: both;

border: 15px solid #fff;

}

/* DIV to house all of the panels, long! */

.stripViewer .panelContainer{

left: 0; top: 0;

width: 100%;

position: relative;

z-index:1;

}
 

.stripViewer .panelContainer .day, .stripViewer .panelContainer .night{

height: 178px;

display: block;

background-repeat:no-repeat;

position: relative;

z-index:1;

}

.stripViewer .panelContainer .day{

background-image: url("../images/day_back.png");

}

.stripViewer .panelContainer .night{

background-image: url("../images/night_back.png");

}

.stripViewer .panelContainer .panel{

float:left;

position: relative;

width: 950px;

}

.stripViewer .PanelContainer .panel .panelWrapper{

padding: 20px;

}

Open in new window

0
 
LVL 4

Expert Comment

by:rafe_
Comment Utility
if everything has relative positioning, how are you placing the full back and sliding elements in the same place? at the moment as far as i can tell, none of these elements will overlap

and yes, everything with a z-index requires position: relative, position: absolute or position: fixed
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
Any suggestions you can think of that i can do then? Kind of confused then would the full_back needs to be infront correct?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
I attached my HTML if that helps you visualize it. Right the sliding images are above.

Thanks,

Ryan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<title></title>

<script src='js/jquery.js' type='text/javascript'></script>  

<script src="js/jquery-easing.js" type='text/javascript'></script>  

<script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'></script>  

<script src="js/coda-slider.js" type='text/javascript'></script>  

<link rel="stylesheet" href="css/summer.css" type="text/css" media="screen" />

<script type="text/javascript">

jQuery(window).bind("load", function() {

	jQuery("div#largeSlide").codaSlider();

	jQuery("div#postSlide").codaSlider();
 

});

</script>

</head>
 

<body>

<div id="wrapper">

	<div id="innerWrap">

		

		<!-- main page slider -->

		<div id="largeSlide">

			<div class="panelContainer">
 

				<div class="panel day" title="first">

					<div class="panelWrapper">

					</div>
 

				</div>

			

				<div class="panel night" title="second">

					<div class="panelWrapper">

					</div>

				</div>
 

			</div><!-- .panelContainer -->

		</div><!-- #largeSlide -->

		<!-- end -->
 

	

	</div>

</div>

</body>

</html>

Open in new window

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 4

Accepted Solution

by:
rafe_ earned 500 total points
Comment Utility
ah - here is the problem:

the z-index is also determined by the z-index of its children. A child of an element, as far as I can tell from experiments, cannot be behind its parent using z-index.

Take the day/night, and put them in another "innerWrap" which occupies exactly the same position as the existing one, so that your panel day and panel night divs are not inside the largeSlide.

You will be able to set the z-index successfully then, but if you do this you actually will not need to. Put the day and night panels in the html before the largeSlide and the largeSlide will be in front of the day and night panels already. You will probably need to use some absolute positioning to get them to over lap each other, but if you give "wrapper" a position: relative, then you can give these containers absolute positions within "wrapper"

i hope this made sense, i am doggedly tired so i wouldn't be surprised if i was unable to form a coherent sentence.

let us know how it goes
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
Hey, thanks for your reponse.

I was kind of confused on how to put the sliding images in another wrapper since they need to be apart of a specific XHTML structure for the slider to work, so I did this:

I have #innerWrap which has:

#innerWrap{
background-image: url("../images/full_back.png");
background-repeat:no-repeat;
position:relative;
z-index:10;
}

And HTML is below. Still nothing, even know it is not in the same DIV as large slide. Is it because #innerWrap is wraps the whole layout?
<div id="wrapper">

	<div id="innerWrap">

		

		<!-- main page slider -->

		<div id="largeSlide">

			<div class="panelContainer">
 

				<div class="panel day" title="first">

					<div class="panelWrapper">

					</div>

				</div>

			

				<div class="panel night" title="second">

					<div class="panelWrapper">

					</div>

				</div>
 

			</div><!-- .panelContainer -->

		</div><!-- #largeSlide -->

		<!-- end -->

	

	</div>

</div>

Open in new window

0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
UPDATED HTML:

Like this?
<div id="wrapper">

	<div id="largeSlide"></div>

	<!-- main page slider -->

	<div class="panelContainer">
 

		<div class="panel day" title="first">

			<div class="panelWrapper">

			</div>

		</div>
 

		<div class="panel night" title="second">

			<div class="panelWrapper">

			</div>

		</div>
 

	</div><!-- .panelContainer -->

	<!-- end -->

</div>

Open in new window

0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
Scratch that last one, check this one, panels are before the background
<div id="wrapper">

	<!-- main page slider -->

	<div id="timeday">

		<div class="panelContainer">
 

			<div class="panel day" title="first">

				<div class="panelWrapper">

				</div>

			</div>
 

			<div class="panel night" title="second">

				<div class="panelWrapper">

				</div>

			</div>
 

		</div><!-- .panelContainer -->

	</div>

	<div id="largeSlide"></div>

	

	<!-- end -->

</div>

Open in new window

0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
CSS for that section:

#wrapper{
width:900px;
margin:0 auto;
position:relative;
}
#largeSlide{
height:430px;
width:950px;
background-image: url("../images/full_back.png");
background-repeat:no-repeat;
position:absolute;
z-index:10;
top:0;
}
#timeday{
height:430px;
width:950px;
}
0
 
LVL 4

Expert Comment

by:rafe_
Comment Utility
yeah does that last one work?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
Just played around with it and I got it. Thanks for all of your help.

Ryan
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now