#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    1
    Rep Power
    0

    Z-index not working??


    I have a rounded corner box with my form inside. I need the black box to be behind the green box...kinda make it look like a tab. Take a look at the images and my code...I can't seem to make it look like IMG2

    Two images linked:

    IMG1: The actual product when i launch the HTML
    http://tinyurl.com/9pr9lka (Sorry...this site won't let me post hyperlinks)

    IMG2: An image I just made to represent what I want.
    http://tinyurl.com/94sbu25

    Here's the portion of my HTML:
    Code:
    <body>
    	<table class="mybox">
    	<form name="ReynoldsF" id="ReynoldsF">
    		<div class="titlediv">
    			<h3 class="blocktitle" style="padding-left:20px;margin-bottom:-20;">Reynold's Number</h3>
    		</div>
    		<tr> .....rest of form stuff....</form></table></body>
    Here's the CSS:
    Code:
    .mybox{
    z-index:3;
    width:380px;
    height:210px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border:3px solid #052973;
    background: rgb(127,145,40); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmOTEyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYjQ3MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(127,145,40,1) 0%, rgba(59,71,5,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(127,145,40,1)), color-stop(100%,rgba(59,71,5,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(127,145,40,1) 0%,rgba(59,71,5,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(127,145,40,1) 0%,rgba(59,71,5,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(127,145,40,1) 0%,rgba(59,71,5,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(127,145,40,1) 0%,rgba(59,71,5,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f9128', endColorstr='#3b4705',GradientType=0 ); /* IE6-8 */
    
    -webkit-box-shadow: #000000 8px 8px 8px;
    -moz-box-shadow: #000000 8px 8px 8px;
    box-shadow: #000000 8px 8px 8px;
    }
    
    
    .titlediv {
    z-index:1;
    position:fixed;
    margin-bottom:-20;
    padding-bottom:20px;
    border-radius: 25px 25px 0px 0px; 
    -moz-border-radius: 25px 25px 0px 0px; 
    -webkit-border-radius: 25px 25px 0px 0px; 
    background-color:black;
    border: 1px solid #800000;
    width:380px;
    height:30px;
    }
    You can see my z-index for ".titlediv" is less than the z-index of ".mybox" which is how I want it, but for some reason ".titlediv" appears ABOVE ".mybox"...i can't get this working properly.

    Any help?
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    z-index applies to positioned elements; give .mybox position: relative.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0
    Originally Posted by AndrewSW
    z-index applies to positioned elements; give .mybox position: relative.
    He is exactly right. When using z-index you are required to add a position property to the element. Z-index will only work along side of the position property.

IMN logo majestic logo threadwatch logo seochat tools logo