css - CSSリンク：サイト全体を移動するアクティブな状態とマージン

Question

クリックしたときにリンクを少し下に移動したいのですが、：active stateを使用してリンクを移動しようとすると、そのボタンの下にあるすべてのものも少し移動します。これに対する最も簡単な修正は何ですか（HTMLコードをあまりいじりたくないので、css関連のものかもしれません）。

HTML：

<a href="#">Test</a>
<p>This paragraph moves when I click button above. I want to prevent that.</p>

CSS：

a { display: inline-block; }
a:active { margin: 5px 0 0 0; }

position:relative＆top: 5pxは良い考えのように聞こえますが、これも機能しません（ボタンは永遠に1px下に移動します：/）。

score 3 · Accepted Answer

これはあなたのニーズに合うかもしれません：

a {
    display: inline-block;
    margin: 0 0 5px 0;
}

a:active {
    margin: 5px 0 0 0;
}

score 2 · Accepted Answer

個人的に、私はこれにマージンを使用しません、私は使用します：

a:active {
    position:relative;
    top:5px;
}

はるかにクリーンで、コードが少なく、残りのレイアウトに影響を与える可能性が低く、サイトの将来性が向上します。

マージンは要素ボックス自体を移動しますが、相対位置は要素のボックスをそのままにしますが、ドキュメントのフローから要素を取り除き、他に何も影響を与えずに要素を好きな場所に移動できるようにします。

score 1 · Accepted Answer

に追加position:relativeしてから、aで、a:activeに変更することができtop:5pxます。したがって、コードは次のようになります

a{display:inline-block; position:relative;}
a:active{top:5px;}

親戚の配置は、基本的に「この要素はページ上の好きな場所に移動できますが、スペースは要素が元々あった場所にとどまります」と言います。リンクのデフォルトの位置は静的でした。つまり、通常の要素の流れに従います。したがって、マージンを下に移動する5pxと、その下のすべてが変更されます

score 0 · Accepted Answer

aをaでラップしてdivから、そのdivに指定された高さを指定すると同時に、a絶対位置を指定することもできます。

下記参照：

4 に答える 4