CSS position:absoluteで複数の要素を動かす

position:absoluteは要素を任意に移動できるCSSです。

基準となる親要素にposition: relativeを指定して動かします。

しかし、その子要素が複数あったとき、複数の要素をposition:absoluteで動かせるのか？

CSS position:absoluteで複数の要素を動かすことについて解説します。

【結論】一つの基準に対して複数の子要素をposition:absoluteで動かすことは可能

下記にて具体例を用いて解説します。

before,afterをposition:absoluteで動かす

複数の要素をposition:absoluteで動かすことでよくあるのはbefore,afterを動かす例です。

下記はその例です。

ボタン

<style>
.example2{
    position: relative;
    display: block;
    background: #ff7b29;
    padding: 10px 10px 10px 40px;
    width: 200px;
    box-sizing: border-box;
    color: #FFF;
    text-decoration: none;
}
.example2::before{
    content: "";
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: #FFF;
    border-radius: 50%;
}
.example2::after{
    content: "";
    display: block;
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid #ff7b29;
    border-right: 2px solid #ff7b29;
    transform: rotate(45deg);
}
</style>
<a class="example2" href="#">ボタン</a>

基準となる親aタグに「position: relative」を指定します。

before,afterはその子要素となるため「position: absolute」で親要素aタグを基準に動かすことができます。

基準が同じであるため、2つの要素の距離感も相対的に調整ができます。

複数の子要素、孫要素をposition:absoluteで動かす

• その1
• その2
• その3
• その4リンク

<style>
.example{
    position: relative;
    background: #eee;
    border: 1px solid #333;
    padding: 0;
    box-sizing: border-box;
    display: block;
    height: 150px;
    list-style: none;
}
.example>li,.example>li>a{
    position: absolute;
    padding: 10px;
    border: 1px solid #333;
    width: 200px;
    margin: 0;
    background: #f8f35f;
}
.example>li:nth-of-type(1){
    right: 20px;
    top: 20px;
}
.example>li:nth-of-type(2){
    right: 20px;
    bottom: 20px;
}
.example>li:nth-of-type(3){
    left: 20px;
    bottom: 20px;
}
.example>li:nth-of-type(4){
    position: static;
    background: #eee;
}
.example>li>a{
    left: 60px;
    top: 20px;
    background: #87e6cd;
}
</style>
<ul class="example">
    <li>その1</li>
    <li>その2</li>
    <li>その3</li>
    <li>その4<a href="#">リンク</a></li>
</ul>

ulに「position: relative」を指定し基準としています。

その子要素liを「position: absolute」で動かしています。

このように一つの基準に対して複数の子要素を動かすことができます。

4番目のliの子要素aタグもulを基準として動かすことが可能です。

この場合、4番目のliには「position: static」を指定し基準とならないようにします。

基準といえば「position: relative」と思い込みがちですが、「position: absolute」もpositionになります。そのため基準にならないようにstaticを指定しています。

まとめ

一つの基準に対して複数の子要素をposition:absoluteで動かすことは可能

以上、CSS position:absoluteで複数の要素を動かすことについて解説しました。