HTML/CSSボタンを自由自在に配置する

HTML/CSSを書いていると、ボタンの位置をほかの要素にかぶせたいとき、たまにありますよね。。。

そんな時はposition: relativeを使用してみましょう

例えばこんな感じにすることができます。

ボタンの位置変更

CSSは以下のように書けばいいです。

    .box{
    position: relative;
    height: 80px;
}
.box button{
    padding: 0;
    position: absolute;
    left: 300px;
    top: -13px;
    width: 40px;
    height: 40px;
    text-align: center;
}

親要素のクラスをboxとしたとき、親要素のpositionをrelativeにします。 そして、その子要素のpositionをabsoluteにしてleftとtopの値を変更して微調整しましょう。