The z-index is higher than the other lay why not show?

http://www.silkfabricwholesale.com/silk-charmeuse/16mm-silk-charmeuse-fabric-turquoise.html

when click the contact us link, which next to add to cartbutton, it pop up a window, the transparent and the form layer are higher than the header lay.why the header lay is over both other lays.thank you!

the header lay hides some part of the form. how to correct it?

@Paul O’B

Suggestion…

Search for: “z-index”

Find a message: “z-index?”

Read: http://www.sitepoint.com/forums/showthread.php?877211-z-index&p=5175124&viewfull=1#post5175124

There are other messages, too.

If nothing helps, please ask again.

I was going to suggest you reduce the z-index here:

header {
position: relative;
z-index: [COLOR="#FF0000"]999[/COLOR];
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

But while I was testing it, the page changed significantly, so this may not help any more. It was working with what you had, but I wasn’t finished testing.

i did as your told and set the z-index to 1, but when you closed the popup window, you will find the menu in the header lay is unnormal. how to correct it? thank you

Hi,

Your pop up is inside .main which has a low z-index so setting a high z-index on the popup has no effect as its .main that controls the stacking position with relation to elements outside that context.

You can’t however increase the z-index of .main because it needs to sit under the fixed header. It is therefore impossible for your popup to work in that position.

You have two choices:

  1. Move the popup to the end of the html and it will work without alteration:

	<div id="ctemailone" class="z_email z_emailone"> <a class="modal_close" href="#"></a>
												<form action="" method="post" class="ajax-submit">
														<div class="form_email">
																<label><span class="require">*</span>From: </label>
																<input type="text" name="c_email" class="c_email" />
																<span class="e_info">Enter your Email...</span> </div>
														<div class="r_sku">
																<div class="sku_left">
																		<label>To: <span class="ms">Ms.Zoe</span></label>
																		<img src="http://www.silkfabricwholesale.com/media/catalog/product/cache/1/small_image/42x42/9df78eab33525d08d6e5fb8d27136e95/2/_/2_62.jpg"/>
																		<input class="p_img" type="hidden" value="http://www.silkfabricwholesale.com/media/catalog/product/cache/1/small_image/42x42/9df78eab33525d08d6e5fb8d27136e95/2/_/2_62.jpg" name="pimg" />
																</div>
																<div class="namesku">
																		<h4>16mm silk charmeuse fabric-turquoise</h4>
																		<p>SKU:SZD16114002</p>
																		<input class="p_img" type="hidden" value="16mm silk charmeuse fabric-turquoise" name="p_name" />
																		<input class="p_img" type="hidden" value="SZD16114002" name="p_sku" />
																		<input class="p_img" type="hidden" value="http://www.silkfabricwholesale.com/silk-charmeuse/16mm-silk-charmeuse-fabric-turquoise.html" name="p_url" />
																</div>
														</div>
														<div class="name_ph">
																<div class="i_name">
																		<label>Name:</label>
																		<input type="text" name="name" class="r_name" />
																</div>
																<div class="i_phone">
																		<label>Telphone:</label>
																		<input type="text" name="phone" class="r_phone" />
																</div>
														</div>
														<div class="r_subject">
																<label><span class="require">*</span>Subject: </label>
																<input type="text" name="subject" class="subject" value="I am interested in your 16mm silk charmeuse fabric-turquoise" />
														</div>
														<div class="textarea">
																<label><span class="require">*</span>Message :</label>
																<textarea name="message" class="message"></textarea>
														</div>
														<div class="qty">
																<label>Quantity Needed:</label>
																<input type="text" name="qty" class="i_qty" value="please enter a number"/>
																<select class="unit" name="s_unit">
																		<option value="Select Unit Type">Select Unit Type</option>
																		<option value="yards">Yards</option>
																		<option value="meters">Meters</option>
																</select>
														</div>
														<div class="text_tip">
																<p>Enter your inquiry details such as:</p>
																<ul >
																		<li>Self introduction</li>
																		<li>Require sepecifications</li>
																		<li>Inquire about price/MQQ</li>
																</ul>
														</div>
														<div class="r_submit">
																<input type="submit" value="" class="e_submit" />
														</div>
												</form>
										</div>
</body>

  1. Hook into the JS and when the popup is clicked add a new class to .main that has a high z-index and then remove the class when the popup is closed.

[QUOTE=Paul O’B;5271978]Hi,

you’re my hero. in the context.i must use ways 2). i got it. thank you.