如何使表单顶部的所有其他CSS？

Question

我需要将这个简单的表单样式作为所有其他CSS的顶部。 他们处于相同的位置，他们需要像那样。 风格中的.brust是一个简单的div来创造一个明星 我尝试了几种方法，但由于某种原因，形式仍然在CSS下  DIV。 我怎么能这样做？感谢。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你需要定位你的表格＆＃39;元素正确。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要调整表单的z-index，使其位于:after伪元素之上。

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

工作示例：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需要为表单设置位置和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;
      }