正确定位元素

Question

我已经为此苦苦挣扎了一个多小时，我需要你的帮助，我正在创建一个 Web 表单，我很难将这些阴影元素推到表单而不是容器后面。我试过给 .form 类 div 一个 z-index 属性，但没有成功。它只是将其保留在表单前面。如果没有建立 z-index 属性，它会一直返回到容器 .mainContent div。请帮忙！我已将它添加到 codepen 以增加每个人的便利。提前感谢您的任何意见。

HTML 和 CSS 如下：

    <div class="mainContent">
<div class="form">
<form action="" method="post">
<fieldset class="fieldset">
    <p>
        <label id="yname">Your Name:</label>
        <br>
        <input id="yname" type="text" name="yourname" />
    </p>
    <p>
        <label id="subject">Subject:</label>
        <br>
        <input id="subject" type="text" name="subject" />
    </p>
    <p>
        <label id="email">E-mail:</label>
        <br>
        <input id="email" type="text" name="email" />
    </p>
    <p>
    <label id="comments">Your comments:</label>
    <br>
    <textarea id="comments" name="comments" maxlength="150" rows="10" cols="40">
    </textarea>
    </p>
    <p id="buttons">
        <input id="button" type="submit" value="Send it!">
        <input id="button" type="reset" value="Reset">
    </p>
</fieldset>
</form>
</div>
</div>

.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;
}

网址： http://codepen.io/anon/pen/wBQGjZ

Answer 1

最简单的解决方案：

form {
    background: none repeat scroll 0 0 grey;
}

将表单设为灰色而不是 .form