title: Not able to select radio button: issue with z-index?
body: <p>I am observing this strange behavior with the radio buttons. Whenever I set the z-index of the parent div I am not able to select the radio buttons.</p>
  
  <p>Here is the fiddle link: <a href="http://jsfiddle.net/x7rm63n9/2/" rel="nofollow">http://jsfiddle.net/x7rm63n9/2/</a>. Try to select the buttons inside the main box. </p>
  
  <p>The css style for the main div is:</p>
  
  <pre><code>.main_box
  {
   position: relative;
   background-color: #444;
   width: 65%;
   margin: 30px auto;
   height: 450px;
   z-index: -6;     /* IF I REMOVE THIS LINE I CAN SELECT THE RADIO BUTTONS*/
   border: 12px solid #fff;
  }
  </code></pre>
  
  <p>Why is this happening? Is there any workaround for this without changing z-index?</p>
  
  <p>I tried to set up the simple demo. (<a href="http://jsfiddle.net/juruf6a8/1/" rel="nofollow">http://jsfiddle.net/juruf6a8/1/</a>) It works fine here.</p>
  
  <p>Thanks in advance,</p>