SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    http://www.silkfabricwholesale.com/s...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?

    2012-12-22_005643.jpg

    @Paul O'B

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,586
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Suggestion.....

    Search for: "z-index"

    Find a message: "z-index?"

    Read: http://www.sitepoint.com/forums/show...=1#post5175124

    There are other messages, too.

    If nothing helps, please ask again.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I was going to suggest you reduce the z-index here:

    Code:
    header {
    position: relative;
    z-index: 999;
    -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.

  4. #4
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I was going to suggest you reduce the z-index here:

    Code:
    header {
    position: relative;
    z-index: 999;
    -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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    	<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>

    2) 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.

  6. #6
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Paul O'B;5271978]Hi,





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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •