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

横並び要素で、端の要素を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>

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;
}

成功したコード

.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>

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;
}

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

【サンプルコードあり】HTML・CSSでコーディングしてて、意図しないマージンと要素の重なり（おかしな重なり）等があった場合の修正

今回、コーディング時に下記のように変な状態になってたんで、その原因と、今回どうやって修正したか記事にしました。もし同じような状況になって場合は参考にしてみてください。改善前の状態改善後の状態今回の不具合の原因このセクションを囲ってる中に、M...

inopro.jpn.org

2022.04.18