title: Getting Elements positioned correctly
body: <p>I have beat my head on this for over an hour and I need your help, I am creating a web form and I am having the most difficult time getting these shadow elements pushed behind the form and not the container. I have tried giving the .form class div a z-index property with no success. It just keeps it in front of the form. Without a z-index propery being established it goes all the way back to the container .mainContent div. Please help! I have added it to codepen for everyones added convenience. Thanks in advance for any and all input.</p>
  
  <p>HTML AND CSS BELOW:</p>
  
  <pre><code>    &lt;div class="mainContent"&gt;
  &lt;div class="form"&gt;
  &lt;form action="" method="post"&gt;
  &lt;fieldset class="fieldset"&gt;
      &lt;p&gt;
          &lt;label id="yname"&gt;Your Name:&lt;/label&gt;
          &lt;br&gt;
          &lt;input id="yname" type="text" name="yourname" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label id="subject"&gt;Subject:&lt;/label&gt;
          &lt;br&gt;
          &lt;input id="subject" type="text" name="subject" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label id="email"&gt;E-mail:&lt;/label&gt;
          &lt;br&gt;
          &lt;input id="email" type="text" name="email" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
      &lt;label id="comments"&gt;Your comments:&lt;/label&gt;
      &lt;br&gt;
      &lt;textarea id="comments" name="comments" maxlength="150" rows="10" cols="40"&gt;
      &lt;/textarea&gt;
      &lt;/p&gt;
      &lt;p id="buttons"&gt;
          &lt;input id="button" type="submit" value="Send it!"&gt;
          &lt;input id="button" type="reset" value="Reset"&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  .mainContent{
      position:relative;
      background-color:#FFF;
      margin-bottom:45px;
      border-radius: 3px;
      padding-bottom:25px;
      padding-top:25px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }
  
  .mainContent:before, .mainContent:after
  {
    content:"";
    position:absolute; 
    z-index:-100;
    -webkit-box-shadow:0 0px 10px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0px 10px rgba(0,0,0,0.8);
    box-shadow:0 0px 10px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
  } 
  
  .mainContent:after
  {
    right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
    -moz-transform:skew(8deg) rotate(3deg);     
    -ms-transform:skew(8deg) rotate(3deg);     
    -o-transform:skew(8deg) rotate(3deg); 
    transform:skew(8deg) rotate(3deg);
  }
  
  .form{
      background-color:grey;
      width:50%;
      margin:0 auto;
      border-radius:2px;
      position: relative;
    z-index:1;
  }
  
  .fieldset{  
      border:none;
      }
  
  fieldset p{
      margin:0 auto;
      width:50%;
      max-width:300px;
      padding:15px;
      }
  
  label#yname, label#subject, label#email{
      display:block;
      text-align:left;
      float:left;
      font-family:"Times New Roman", Times, serif;
      font-size:1.0em;
      color:black;
      width:300px;
      height:25px;
      font-weight:bold;
  }
  
  input#yname, input#subject, input#email{
      display:block;
      width:50%;
      min-width:300px;
      max-width:350px;
      height:30px;
      border-radius:3px;
  }
  
  label#comments{
      display:block;
      text-align:left;
      font-weight:bold;
      width:300px;
      height:25px;
      color:#000;
      float:left;
      font-family:"Times New Roman", Times, serif;
      font-size:1.0em;
  }
  
  textarea#comments{
      display:block;
      width:50%;
      min-width:300px;
      max-width:350px;
      overflow:scroll;
      border-radius:3px;
  }
  
  p#buttons{
      margin:0 auto;  
      text-align:center;
      width:50%;
      display:block;
  }
  
  #button{
      width:100px;
      background-color:#FFF;
      font-family: 'hotpapis';
      font-size:1.25em;
      margin:10px;
      border-radius:3px;
      height:50px;
      }
  
  /* ============================
     ==== Form Shadow Effect ====
     ============================ */
  
  .form:before, .form:after{
      z-index: -1; 
      position: absolute; 
      content: "";
      bottom: 15px;
      left: 10px;
      width: 45%; 
      height:25px;
      max-width:600px;
      background: rgba(0, 0, 0, 0.7); 
      box-shadow: 0 20px 15px rgba(0, 0, 0, 0.7);
      transform: rotate(-3deg);
  } 
  .form:after{
      transform: rotate(3deg);
      right: 10px;
      left: auto;
  }
  </code></pre>
  
  <p>URL:
  <a href="http://codepen.io/anon/pen/wBQGjZ" rel="nofollow">http://codepen.io/anon/pen/wBQGjZ</a></p>