javascript - 为什么我的按钮打印在背景下？

Question

在打印屏幕上，您可以看到我的“打印”按钮被切成两半，我不知道为什么。基本上我想将网页“分成两半（75/25）”，但要充分利用垂直页面，这就是为什么它是一个右 div 和一个左 div。一些代码在哪里：

textarea {
  width: 800px;
  height: 100px;
}

html,
body {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
  overflow-y: scroll;
}

input {
  padding-right: 5px;
  border-width: 1px 2px;
}

.big {
  height: 100px;
}

.space,
.list {
  margin: 5px;
}

textarea {
  resize: none;
}

button {
  position: relative;
  background-color: #8a2be2;
  border: none;
  font-size: 20px;
  color: #ffffff;
  padding: 5px;
  width: 80px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
}

.button:after {
  content: "";
  background: #8a2be2;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s;
}

.button:hover {
  background-color: #9932cc;
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
}

.centered {
  width: 70%;
  position: absolute;
  top: 55%;
  left: 80%;
  transform: translate(-100%, -50%);
  text-align: center;
}

.left {
  left: 0;
}

.split {
  height: 50%;
  width: 65%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.split2 {
  height: 50%;
  width: 35%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.right {
  right: 0;
}

.center img {
  width: 75%;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%);
  text-align: center;
  border-radius: 50%;
}

@media only screen and(min-width: 768px) {
  textarea {
    width: 50px;
    height: 50px;
  }
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
}

<div class="split left">
  <div class="centered">
    <h1>Test Submit</h1>
    <form>
      <label for="fname">Situation:</label>
      <select class="list" id="list" onchange="getSelectValue();">
        <option value="option">option</option>
        <option value="option">option</option>
      </select>
      <select class="list" id="list" onchange="getSelectValue();">
        <option value="option">option</option>
        <option value="option">option</option>
      </select>
      <form action="/action_page.php">
        <label for="date">Date:</label>
        <input type="date" id="date" name="date">
      </form>
      <br><br>
      <label for="fname">Background:</label>
      <br>
      <input class="space" type="text" id="Background" name="Background" Rows="1" MaxLength="40" onclick=myFunction1()>
      <input class="space" type="text" id="Background" name="Background" Rows="1" MaxLength="40" onclick=myFunction1()><br><br>
      <label for="fname">Assessment:</label>
      <br>
      <textarea class="space big" type="text" id="Assessment" name="Assessment" Rows="1"></textarea>
      <br>
      <label for="fname">Recomendation:</label>
      <br>
      <textarea class="space big" type="text" id="Recomendation" name="Assessment" Rows="1" onclick=></textarea>
      <br>
      <button class="button" type="button" onclick=myFunction()> Print </button>
    </form>
    <p>When you click the print button it will generate the report.</p>
  </div>
</div>
<div class="split2 right">
  <div class="center">
  </div>
</div>

点击查看问题： PrintScreen

标签： javascripthtmlcss