【CSS】ボタンの上にボタンを重ねる方法

「ボタンの上にボタンを置こうと思ってaタグ内にaタグを置いたところ、崩れてしまった！どうやればボタンの上にボタンを重ねられるんだ!?」

CSSでaタグのボタンの上にaタグのボタンを重ねる方法を解説します。

aタグの子孫にaタグは置けない

下記のようにaタグ内に子孫要素としてaタグを置いてみましょう。

<div>
    <a href="#">
        親要素のボタン
        <a href="#">子要素のボタン</a>
    </a>
</div>

ブラウザ上では下記のように表示されます。

親子要素だったaタグは、ブラウザ側で兄弟要素に直されてしまいます。

<div>
    <a href="#">親要素のボタン</a>
    <a href="#">子要素のボタン</a>
</div>

aタグの上にaタグを重ねるにはhtml上 親子要素にできず、兄弟要素で挑む必要があります。

position:absoluteで重ねる

position:absoluteを使うと兄弟要素にも重ねることができます。

下記は例です。ちゃんとそれぞれのボタンは違うページへリンクします。

<style>
.example{
    position: relative;
}
.example a{
    display: block;
    border: 1px solid #333;
}
.example a:first-child{
    background: #b8e2d7;
    padding: 50px 0 100px 50px;
}
.example a:last-child{
    background: #051aba;
    color: #FFF;
    padding: 10px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>
<div class="example">
    <a href="https://csshtml.work/">下のボタン（サイトトップへ）</a>
    <a href="https://csshtml.work/comic001/">上に重ねるボタン（当サイトについてへ）</a>
</div>

基準となる要素に「position: relative」を指定します。これは親要素に指定します。

重ねるaタグに指定するのではないので注意しましょう。

重ねる側に「position: absolute」を指定し、topやleft、right、bottomで位置を調整します。

position: absoluteについて詳しくはこちら↓

【まとめ】ボタンの上にボタンを重ねる方法

aタグの子孫にaタグは置けない

aタグどうしを兄弟要素にしてCSSを調整しましょう。

position:absoluteで重ねる

重ねる側に「position: absolute」を指定し、topやleft、right、bottomで位置を調整しましょう。

以上、ボタンの上にボタンを重ねる方法でした。