【サンプルコードあり】display flexやinline-block で横並びでボタンの配置の為 position: absolute したら要素が下に潜り込んでしまった時にやった事

display: flex や display: inline-block;で横並びした時

横並び要素で、端の要素をposition: absolute;で配置した時。
浮かせた要素の下に入り込んで重なってしまってちょっと悩んだ。

いろいろ検証して解決できたのでその方法書いときます。
わかれば簡単なことでした。

こんな状態でした。

今回の場合は、重なってる要素の親要素にpaddingを設定。
これだけで解決しました。

実際に失敗してるコードと、成功したコードをサンプルで
書いときますので、良かったら参考にして下さい。

失敗してる時のコード
成功したコード

失敗してる時のコード

HTML

    <nav id="global-nav2" class="header-nav2">
      <div class="container2 c-nav2">

        <div class="nav-logo">
          <img src="./imgs/navlogo.png" alt="ロゴ">
        </div><!-- /.nav-logo -->
        <div class="nav-inner2">
          <ul class="header-menu2">
            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">HOME</p>
                <p class="header-list-bottom2">ホーム</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">LEADERS</p>
                <p class="header-list-bottom2">指導者紹介</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">BLOG</p>
                <p class="header-list-bottom2">ブログ</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">CLASSES</p>
                <p class="header-list-bottom2">クラス紹介</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">HISTORY</p>
                <p class="header-list-bottom2">道場の歴史</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">MEMBER'S</p>
                <p class="header-list-bottom2">会員様へ</p>
              </a>
            </li><!-- /.header-nav-list -->
          </ul>

          <div class="n-btn2">
            <a href="#">
              <img src="./imgs/mail.svg" alt="メール">
              <p class="header-btn-button">お問い合わせ</p>
            </a>
          </div>
        </div>
      </div>
    </nav>

</div>

</a>

</li>

<p class="header-list-top2">LEADERS</p>

<p class="header-list-bottom2">指導者紹介</p>

</a>

</li>

</a>

</li>

<p class="header-list-top2">CLASSES</p>

<p class="header-list-bottom2">クラス紹介</p>

</a>

</li>

<p class="header-list-top2">HISTORY</p>

<p class="header-list-bottom2">道場の歴史</p>

</a>

</li>

<p class="header-list-top2">MEMBER'S</p>

</a>

</li>

</ul>

<p class="header-btn-button">お問い合わせ</p>

</a>

</div>

</nav>

CSS

.header-nav2 {
  width: 100%;
  background-color: rgba(132, 11, 126, 0.7);
  margin-top: 200px;
}
.c-nav2 {
  position: relative;
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-menu2 {
  letter-spacing: -0.4em;
  margin-right: 10px;
}
.header-nav-list2 {
  display: inline-block;
  letter-spacing: 0.4em;
}
.header-menu2 li a {
  display: block;
  color:rgb(255, 255, 255);
  padding: 20px 10px;
  text-align: center;
}
.header-list-top2 {
  font-size: 24px;
}
.header-list-bottom2 {
  font-size: 14px;
}
.n-btn2 a {
  position: absolute;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: black;
  text-align: center;
  padding: 30px 0;
  bottom: 0;
  right: 0;
}

.header-nav2 {

width: 100%;

background-color: rgba(132, 11, 126, 0.7);

margin-top: 200px;

}

.c-nav2 {

position: relative;

max-width: 1400px;

margin: auto;

display: flex;

justify-content: space-between;

align-items: center;

}

.header-menu2 {

letter-spacing: -0.4em;

margin-right: 10px;

}

.header-nav-list2 {

display: inline-block;

letter-spacing: 0.4em;

}

.header-menu2 li a {

display: block;

color:rgb(255, 255, 255);

padding: 20px 10px;

text-align: center;

}

.header-list-top2 {

font-size: 24px;

}

.header-list-bottom2 {

font-size: 14px;

}

.n-btn2 a {

position: absolute;

display: block;

width: 150px;

height: 150px;

border-radius: 50%;

background-color: black;

text-align: center;

padding: 30px 0;

bottom: 0;

right: 0;

}

成功したコード

.c-nav2　にpadding-right: 150px;　を追加しただけ
他の人が見ても、何のためのpaddingなのかコメントつけとくといいかもです。

HTML

    <nav id="global-nav2" class="header-nav2">
      <div class="container2 c-nav2">

        <div class="nav-logo">
          <img src="./imgs/navlogo.png" alt="ロゴ">
        </div><!-- /.nav-logo -->
        <div class="nav-inner2">
          <ul class="header-menu2">
            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">HOME</p>
                <p class="header-list-bottom2">ホーム</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">LEADERS</p>
                <p class="header-list-bottom2">指導者紹介</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">BLOG</p>
                <p class="header-list-bottom2">ブログ</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">CLASSES</p>
                <p class="header-list-bottom2">クラス紹介</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">HISTORY</p>
                <p class="header-list-bottom2">道場の歴史</p>
              </a>
            </li><!-- /.header-nav-list -->

            <li class="header-nav-list2">
              <a href="#">
                <p class="header-list-top2">MEMBER'S</p>
                <p class="header-list-bottom2">会員様へ</p>
              </a>
            </li><!-- /.header-nav-list -->
          </ul>

          <div class="n-btn2">
            <a href="#">
              <img src="./imgs/mail.svg" alt="メール">
              <p class="header-btn-button">お問い合わせ</p>
            </a>
          </div>
        </div>
      </div>
    </nav>

</div>

</a>

</li>

<p class="header-list-top2">LEADERS</p>

<p class="header-list-bottom2">指導者紹介</p>

</a>

</li>

</a>

</li>

<p class="header-list-top2">CLASSES</p>

<p class="header-list-bottom2">クラス紹介</p>

</a>

</li>

<p class="header-list-top2">HISTORY</p>

<p class="header-list-bottom2">道場の歴史</p>

</a>

</li>

<p class="header-list-top2">MEMBER'S</p>

</a>

</li>

</ul>

<p class="header-btn-button">お問い合わせ</p>

</a>

</div>

</nav>

CSS

.header-nav2 {
  width: 100%;
  background-color: rgba(132, 11, 126, 0.7);
  margin-top: 200px;
}
.c-nav2 {
  position: relative;
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 150px; /* お問い合わせボタン下空白用 */
}

.header-menu2 {
  letter-spacing: -0.4em;
  margin-right: 10px;
}
.header-nav-list2 {
  display: inline-block;
  letter-spacing: 0.4em;
}
.header-menu2 li a {
  display: block;
  color:rgb(255, 255, 255);
  padding: 20px 10px;
  text-align: center;
}
.header-list-top2 {
  font-size: 24px;
}
.header-list-bottom2 {
  font-size: 14px;
}
.n-btn2 a {
  position: absolute;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: black;
  text-align: center;
  padding: 30px 0;
  bottom: 0;
  right: 0;
}

.header-nav2 {

width: 100%;

background-color: rgba(132, 11, 126, 0.7);

margin-top: 200px;

}

.c-nav2 {

position: relative;

max-width: 1400px;

margin: auto;

display: flex;

justify-content: space-between;

align-items: center;

padding-right: 150px; /* お問い合わせボタン下空白用 */

}

.header-menu2 {

letter-spacing: -0.4em;

margin-right: 10px;

}

.header-nav-list2 {

display: inline-block;

letter-spacing: 0.4em;

}

.header-menu2 li a {

display: block;

color:rgb(255, 255, 255);

padding: 20px 10px;

text-align: center;

}

.header-list-top2 {

font-size: 24px;

}

.header-list-bottom2 {

font-size: 14px;

}

.n-btn2 a {

position: absolute;

display: block;

width: 150px;

height: 150px;

border-radius: 50%;

background-color: black;

text-align: center;

padding: 30px 0;

bottom: 0;

right: 0;

}

よかったら参考にしてもて下さい。

リンク