Solved

Working with z-index and slider

Posted on 2009-04-13
13
311 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_
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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

895 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

15 Experts available now in Live!

Get 1:1 Help Now