Solved

Working with z-index and slider

Posted on 2009-04-13
13
315 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 4
13 Comments
 
LVL 4

Expert Comment

by:rafe_
ID: 24134852
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
ID: 24138199
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
ID: 24139812
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:rafe_
ID: 24143914
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
ID: 24144161
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
ID: 24144195
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
 
LVL 4

Accepted Solution

by:
rafe_ earned 500 total points
ID: 24144314
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
ID: 24147325
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
ID: 24147442
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
ID: 24147463
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
ID: 24147474
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_
ID: 24147713
yeah does that last one work?
0
 
LVL 1

Author Comment

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

Ryan
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

735 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