"Button:active" 移动所有按钮而不是只点击按钮答案

【问题标题】："Button:active" moves all buttons instead of only clicked button"Button:active" 移动所有按钮而不是只点击按钮
【发布时间】：2020-04-13 06:51:37
【问题描述】：

我知道这与边距的碰撞或布局有关，但我无法完全弄清楚。我的目标是将点击的（div）按钮移动 5 个像素。我目前的做法是将 :active margin-top 设置为 5。

我也不知道如何让所有按钮占据整个屏幕空间。使用 100% 或 100vh 会产生太多空间。

CSS：

body{
  margin: 0;
  padding: 0;
  font-family: Sans-Serif;
  -webkit-animation: bgcolor 20s infinite;
  animation: bgcolor 10s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

header{
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  font-size: 25px;
}

.container{
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

.question{
  font-size: 35px;
  margin: 10px;
  font-weight: bold;
  color: white;
}

.buttons-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  height: 100%;
}

.button{
  padding: 25px;
  background-color: green;
  color: white;
  font-size: 25px;
  box-shadow: 0px 5px 0px #504f4f;
}

.button:active{
  box-shadow: none;
  margin-top: 5px;
}


@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

HTML

<?php
 include 'header.php';
?>
<div class="wrapper">

 <header>
   Quiz
 </header>

 <div class="container">
   <div class="question">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
   <div class="buttons-container">
     <div class="button">
       Opt 1
     </div>

     <div class="button">
       Opt 2
     </div>

     <div class="button">
       Opt 3
     </div>

     <div class="button">
       Opt 4
     </div>
   </div>

 </div>

</div>


</body>
</html>

【问题讨论】：

使用边距会导致文档重排。你想要的是position: relative; top: -5px;
谢谢你成功了。我之前尝试过这样做，但单独进行，但没有奏效。

标签： css button layout

【解决方案1】：

我的评论进一步解释：当您使用边距时，您实际上会影响文档流，这会导致整个页面重排和重新布局。

如果您想保留文档流但轻推按钮，您应该考虑使用相对定位，即position: relative; top: -5px;。

ps：默认为position: static。

【讨论】：