如何使窗體頂部的所有其他的CSS？

Question

我需要使所有其他CSS的這種簡單的窗體樣式頂部。 他們處於相同的位置，他們需要這樣。 .brust風格是一個簡單的div創建一個明星 ，我嘗試了幾種方法，但由於某種原因，表單仍在css div之下。 我該怎麼做？謝謝。

.burst-6 { 
 
    background: black; 
 
    width: 310px; 
 
    height: 310px; 
 
    position: relative; 
 
    text-align: center; 
 
    margin-left: 900px; 
 
    margin-top: -220px; 
 
} 
 

 
.burst-6:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 310px; 
 
    width: 310px; 
 
    background: black; 
 
    background: rgba(1, 1, 1, 0.5); 
 
} 
 

 
.burst-6:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 310px; 
 
    width: 310px; 
 
    background: black; 
 
    background: rgba(1, 1, 1, 0.5); 
 
} 
 

 
.burst-6:before { 
 
    -webkit-transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
    -ms-transform: rotate(30deg); 
 
    -o-transform: rotate(30deg); 
 
} 
 

 
.burst-6:after { 
 
    -webkit-transform: rotate(60deg); 
 
    -moz-transform: rotate(60deg); 
 
    -ms-transform: rotate(60deg); 
 
    -o-transform: rotate(60deg); 
 
}

<div class=burst-6> 
 
    <form> 
 
    <fieldset> 
 
     Name: 
 
     <br> 
 
     <input type="text" name=""> 
 
     <br> 
 
     <br> 
 
     <input type="text" name="Em@il" value=""> 
 
     <br> 
 
     <input type="submit" value="Submit"> 
 
    </fieldset> 
 
    </form> 
 
</div>

Answer 1

您需要調整窗體的z-index，使其坐在:after僞元素之上。

form { 
    position: relative; 
    z-index: 1; 
} 

工作例如：

.burst-6 { 
 
    background: black; 
 
    width: 310px; 
 
    height: 310px; 
 
    position: relative; 
 
    text-align: center; 
 
    /* margin-left: 900px; 
 
    margin-top: -220px; */ /* removed for demo */ 
 
} 
 

 
.burst-6:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 310px; 
 
    width: 310px; 
 
    background: black; 
 
    background: rgba(1, 1, 1, 0.5); 
 
} 
 

 
.burst-6:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 310px; 
 
    width: 310px; 
 
    background: black; 
 
    background: rgba(1, 1, 1, 0.5); 
 
} 
 

 
.burst-6:before { 
 
    -webkit-transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
    -ms-transform: rotate(30deg); 
 
    -o-transform: rotate(30deg); 
 
} 
 

 
.burst-6:after { 
 
    -webkit-transform: rotate(60deg); 
 
    -moz-transform: rotate(60deg); 
 
    -ms-transform: rotate(60deg); 
 
    -o-transform: rotate(60deg); 
 
} 
 

 
.burst-6 form { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<div class=burst-6> 
 
    <form> 
 
    <fieldset> 
 
     Name: 
 
     <br> 
 
     <input type="text" name=""> 
 
     <br> 
 
     <br> 
 
     <input type="text" name="Em@il" value=""> 
 
     <br> 
 
     <input type="submit" value="Submit"> 
 
    </fieldset> 
 
    </form> 
 
</div>

Answer 2

你只需要設置的位置和形式的z-index屬性。 check this example

     *CSS* 
         -------- 
     *the star style from now to above* 
    .burst-6 { 
     background: black; 
     width: 310px; 
     height: 310px; 
     position: relative; 
     text-align: center; 
     margin-left: 900px; 
     margin-top: -220px; 
    } 

    .burst-6:before { 
     content: ""; 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 310px; 
     width: 310px; 
     background: black; 
     background: rgba(1, 1, 1, 0.5); 
    } 

    .burst-6:after { 
     content: ""; 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 310px; 
     width: 310px; 
     background: black; 
     background: rgba(1, 1, 1, 0.5); 
    } 

    .burst-6:before { 
     -webkit-transform: rotate(30deg); 
     -moz-transform: rotate(30deg); 
     -ms-transform: rotate(30deg); 
     -o-transform: rotate(30deg); 
    } 

    .burst-6:after { 
     -webkit-transform: rotate(60deg); 
     -moz-transform: rotate(60deg); 
     -ms-transform: rotate(60deg); 
     -o-transform: rotate(60deg); 
    } 
    .burst-6 > form { 
     position: relative; 
     z-index: 1000; 
     } 

Answer 3

你一定要正確定位你的 '形式' 元素。

.burst-6 { 
 
    background: black; 
 
    width: 310px; 
 
    height: 310px; 
 
    position: relative; 
 
    text-align: center; 
 
    margin-left: 30px; 
 
    margin-top: -220px; 
 
} 
 

 
.burst-6:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 310px; 
 
    width: 310px; 
 
    background: black; 
 
    background: rgba(1, 1, 1, 0.5); 
 
} 
 

 
.burst-6:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 310px; 
 
    width: 310px; 
 
    background: black; 
 
    background: rgba(1, 1, 1, 0.5); 
 
} 
 

 
.burst-6:before { 
 
    -webkit-transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
    -ms-transform: rotate(30deg); 
 
    -o-transform: rotate(30deg); 
 
} 
 

 
.burst-6:after { 
 
    -webkit-transform: rotate(60deg); 
 
    -moz-transform: rotate(60deg); 
 
    -ms-transform: rotate(60deg); 
 
    -o-transform: rotate(60deg); 
 
} 
 

 
.burst-6 form { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
    z-index: 9999; 
 
}

<div class=burst-6> 
 
    <form> 
 
    <fieldset> 
 
     Name: 
 
     <br> 
 
     <input type="text" name=""> 
 
     <br> 
 
     <br> 
 
     <input type="text" name="Em@il" value=""> 
 
     <br> 
 
     <input type="submit" value="Submit"> 
 
    </fieldset> 
 
    </form> 
 
</div>