Question

我将我的按钮设置为：active，以在使用margin-top和left进行单击时将其移动，但是每次我单击该按钮时，上方的标题也将移至顶部，这也会影响滚动条。如何仅使按钮移动？

然后，当我在按钮div中添加margin-top时，上面的标题也被推到顶部，如何摆脱它，以便仅按下按钮的人会消失？

谢谢

这是我的代码：https://jsfiddle.net/arknmaulana/ktuvq9sb/6/

<body>
<div class="center" id="section01">
    <div>
        <h1>Journal Online</h1>
        <p>Untuk kamu yang masih pake jurnal analog</p>
    </div>
    <div>
        <button>GET STARTED</button>
    </div>
</div>

#section01 div:nth-child(2):active{
box-shadow: none;
margin-top: 110px;
margin-left: 10px;}

Answer 1

您可以使用CSS transform property来移动按钮，而不会破坏布局：

#section01 div:nth-child(2):active{
    box-shadow: none;
    transform: translate(10px, 20px);
}

单击时如何更改/移动按钮位置

1 个答案: