どの画面幅に変えてもナビゲーションアイコンが右寄せ定位置になるようにしたい

Question

現状

SPサイトのナビゲーションアイコン（虫眼鏡・カート）.p-keywordの箇所になるのですが、どうしても画面幅を狭めるとハンバーガーメニューに重なってしまいます。ご教授いただけないでしょうか。

やりたいこと

どのサイズに変更しても、ハンバーガーメニューに重ならないくらいにしたいです。

試したこと

text-align:left→効かず
float:left→効かず
justify-content:flex-end→効かず
marginで余白を取る→最大幅を超えるので右側に余白ができてしまいます。

コード

        <header class="l-header">
          <div class="l-header__container">
            <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a>
            <nav class="p-nav">
              <ul class="p-nav__menu">
                <li class="p-nav__list">
                  <a  class="p-nav__button" >MENS</a>
                  <ul class="p-nav__sub">
                    <div class="p-nav__container">
                      <li class="p-nav__big"><a href="">MENSTOP</a></li>
                      <li class="p-nav__big">BRAND</li>
                      <li><a href="">ブランドを選択する</a></li>
                      <li class="p-nav__big">CATEGORY</li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">トップス</a></li>
                      <li><a href="">アウター</a></li>
                      <li><a href="">パンツ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">オールインワン</a></li>
                      <li><a href="">スーツ</a></li>
                      <li><a href="">バッグ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">シューズ</a></li>
                      <li><a href="">小物</a></li>
                      <li><a href="">アクセサリー</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">アンダーウェア</a></li>
                      <li><a href="">レッグウェア</a></li>
                      <li><a href="">帽子</a></li>
                    </div>
                  </ul>
                </li>
                <li class="p-nav__list">
                  <a class="p-nav__button" id="p-nav__botton2">WOMENS</a>
                  <ul class="p-nav__sub">
                    <div class="p-nav__container">
                      <li class="p-nav__big"><a href="">WOMENSTOP</a></li>
                      <li class="p-nav__big">BRAND</li>
                      <li><a href="">ブランドを選択する</a></li>
                      <li class="p-nav__big">CATEGORY</li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">トップス</a></li>
                      <li><a href="">アウター</a></li>
                      <li><a href="">パンツ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">オールインワン</a></li>
                      <li><a href="">スーツ</a></li>
                      <li><a href="">バッグ</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">シューズ</a></li>
                      <li><a href="">小物</a></li>
                      <li><a href="">アクセサリー</a></li>
                    </div>
                    <div class="p-nav__container">
                      <li><a href="">アンダーウェア</a></li>
                      <li><a href="">レッグウェア</a></li>
                      <li><a href="">帽子</a></li>
                    </div>
                  </ul>
                </li>
                <li class="p-nav__list">
                  <a href="" class="p-nav__button" id="p-nav__botton3">SHOP LIST</a>
                </li>
              </ul>
            </nav>
            <div class="p-keyword">
              <input class="p-keyword__search" type="search"  placeholder="何かお探しですか">
              <ul class="p-keyword__container">
                <li class="p-keyword__list">
                  <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a>
                </li>
                <li class="p-keyword__list">
                  <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a>
                </li>
              </ul>
            </div>
            <div class="p-hamburger">
              <span class="p-hamburger__bar"></span>
              <span class="p-hamburger__bar"></span>
              <span class="p-hamburger__bar"></span>
            </div>
          </div>
        </header>

@charset "UTF-8";
.l-header__container {
  display: flex;
  align-items: center;
}

.p-hero {
  background-color: #000;
  height: 580px;
  color: #fff;
}

.p-hero__gender {
  display: flex;
  justify-content: space-around;
  margin-top: 80px;
}

.p-hero__text2 {
  color: #fff;
  font-size: 30px;
  font-weight:bold;
}

.p-hero__mtriangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-top: 14px;
  margin-left: 27px;
}

.p-hero__wtriangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-top: 14px;
  margin-left: 50px;
}

.p-hero__link {
  text-decoration: none;
}

.p-footer__text {
  color: #CCCCCC;
  font-size: 0.1rem;
}

.p-footer__sns {
  display: flex;
}

.p-section:last-child {
  margin-top: 24px;
}

.p-footermenu {
  display: flex;
}

.p-footermenu__text {
  color: #000;
  font-size: 0.7rem;
}

.p-copyright__text {
  font-size: 0.7rem;
  text-align: center;
}

@media screen and (max-width: 599px) {
    /* SP style */
.p-hamburger {
  position: absolute;
  right: 10px;
  height: 22px;
  width: 28px;
  z-index: 1;
}

.p-hamburger__bar {
  position: absolute;
  left: 0;
  height: 2px;
  width: 28px;
  background-color: #000;
  box-sizing: border-box;
  transition: 0.7s ease;
}

.p-hamburger__bar:nth-of-type(1) {
  bottom: 20px;
}

.p-hamburger__bar:nth-of-type(2) {
  bottom: 10px;
}

.p-hamburger__bar:nth-of-type(3) {
  bottom: 0px;
}

  /*
  ハンバーガーメニューがクリックされたら
  上の線を真ん中に移動させて45℃回転
*/
.p-hamburger__bar:nth-of-type(1).open {
  top: 10px;
  transform: rotate(45deg);
  background-color: #fff;
}

/*
  ハンバーガーメニューがクリックされたら
  真ん中の線は透明化して見えないようにする
*/
.p-hamburger__bar:nth-of-type(2).open {
  opacity: 0;
  background-color: #fff;
}

/*
  ハンバーガーメニューがクリックされたら
  下の線は真ん中に移動させて-45℃回転
*/
.p-hamburger__bar:nth-of-type(3).open {
  top: 10px;
  transform: rotate(-45deg);
  background-color: #fff;
}

.p-login {
  display: none;
}

.p-nav {
  display: none;
}

.p-keyword {
  margin: 0 auto;
}

.p-keyword__list:nth-of-type(1) {
  margin-right: 20px;
}

.p-keyword__search {
  display: none;
}

.p-keyword__count {
  display: none;
}

.l-header__logo {
  width: 140px;
  object-fit: cover;
}

.p-keyword__glasses {
  width: 28px;
  object-fit: cover;
}

.p-keyword__cart {
  width: 28px;
  object-fit: cover;
}

.p-keyword__container {
  display: flex;
}

.p-hero {
  text-align: center;
}

.p-hero__container {
  padding-top: 100px;
}

.p-hero__text {
  font-size: 28px;
  font-weight: bold;
}

.p-hero__text:not(:last-child) {
  margin-bottom: 5px;
}

.p-hero__text2 {
  font-size: 15px;
}

.p-hero__mtriangle {
  position: relative;
  right: 12px;
}

.p-hero__wtriangle {
  position: relative;
  right: 22px;
}

.p-hero {
  height: 370px;
}

.p-main__category {
  display: flex;
  flex-wrap: wrap;
}

.p-main__list {
  width: 50%;
}

.p-main__img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.p-footer__text {
  text-align: center;
  margin-bottom: 24px;
}

.p-footer__sns {
  justify-content: center;
}

.p-footer__list:not(:last-child) {
  margin-right: 32px;
}

.p-footer__img {
  width: 24px;
  height: 24px;
}

.p-footermenu {
  flex-wrap: wrap;
  justify-content: center;
  height: 100px;
  margin-top: 24px;
}

.p-footermenu__list:not(:last-child):after {
  margin-right: 4px;
  content: "|";
  font-size: 2px;
}

.p-footermenu__exchange {
  font-size: 0.7rem;
  text-align: center;
  color: #CCCCCC;
  text-decoration: underline #CCCCCC;
}

.p-copyright {
  margin-top: 24px;
  padding-bottom: 24px;
}

.p-hamburger__fade {
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s linear;
  position: fixed;
  top: 0px;
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.p-hamburger__fade.open {
  pointer-events: auto;
  opacity: 1;
}

.p-hamburger__container1 > a {
  color: #fff;
  font-size: 18px;
}

.p-hamburger__container1 > a > li {
  margin-bottom: 24px;
}

.p-hamburger__container1 {
  padding-top: 40px;
}

.p-hamburger__container2 > a:not(:first-child) {
  color: #fff;
}

.p-hamburger__container3 > a:not(:first-child) {
  color: #fff;
}

.p-hamburger__container4 > a:not(:first-child) {
  color: #fff;
}

.p-hamburger__container {
  margin-top: 48px;
}

.p-hamburger__container1 {
  border-bottom: 1px solid #fff;
}

.p-hamburger__fade {
  padding-left: 32px;
}

.p-hamburger__fade > div > a {
  text-decoration: none;
}

.p-hamburger__container2 > a:first-child {
  color: #F00;
  font-size: 22px;
}

.p-hamburger__container2 {
  margin-top: 24px;
}

.p-hamburger__container2 > a > li {
  margin-top: 24px;
}

.p-hamburger__container3 > a:first-child {
  color: #F00;
  font-size: 22px;
}

.p-hamburger__container3 > a > li {
  margin-top: 24px;
}

.p-hamburger__container4 > a:first-child {
  color: #F00;
  font-size: 22px;
}

.p-hamburger__container4 > a > li {
  margin-top: 24px;
}

}

Answer 1

どのサイズに変更しても、ハンバーガーメニューに重ならないくらいにしたいです。

画像幅があるので、それ以下のスクリーンサイズではどうしても右スクロールが発生すると思いますので、「どのサイズでも」というのは難しいでしょう。
とりあえず、以下のように変更するとどうでしょうか。

		@media screen and (max-width: 599px) {

			/* SP style */
			.p-hamburger {
				/* position: absolute; */
				/* right: 10px; */
				height: 22px;
				width: 28px;
				z-index: 1;
				position: relative;
				margin-right: 10px;
			}

/* ... */

			.p-keyword__list:nth-of-type(1) {
				/* margin-right: 20px; */
				margin-right: clamp(0px, (100vw - 234px) / 3, 20px);
			}

Comments

[maring]

ありがとうございます。
relativeにすると重ならず、absoluteにすると重なる理由はなんでなんでしょうか？
ここで動きを見てみたんですが、
https://developer.mozilla.org/ja/docs/Web/CSS/position
relativeは他要素に影響を与えず、absoluteは他要素に影響を与える？感じですかね・・

[Lhankor_Mhy]

逆かと思います。
絶対配置した要素はその他の要素から「その場にないもの」として扱われるので、その場にないものとして同じ場所を占めるため、重なります。

relativeは他要素に影響を与え、absoluteは他要素に影響を与えない、という感じです。

[maring]

わかりやすい説明いただきありがとうございます。大変勉強になりました。