CSS | デペロバーツールで、マージンの外の【position枠（画像あり）】とは何ですか？

Question

#マージン枠の外側に、ポジション枠（？）があります。

現在RWDでサイトを作っていますが、あるdivの箇所で、position枠というのが、マージン枠の外についているのがデベロッパーツールで確認できました。

このお陰で、幅やレイアウトの調整がうまくできず困っています…

どうしたら、このような枠が出来てしまうのでしょうか？

対処法をお願いします！

どうやらdiv.box1の{position: relative;}や、div.naviの{position: fixed;}あたりに問題があるようです。

やろうとしていることは、スマホ画面上で、div.navi内の2つの<li>を均等(50%)にして一列に並べ、{position: fixed}で画面に固定表示させることです…

<div class=“box1">

  <div class="navi">
      <ul>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
      </ul>
  </div>

</div> <!-- /.box1 -->

.box1 {
    height: 100px;
    position: relative;
}


.navi {
    width: 100%;　/* ←ムリして加えましたが、本来は指定不要だと思います */
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 1;
    display: block;
}

.navi ul {
    overflow: hidden;
}

.navi li {
    float: left;
    width: 50%;
    display: block;
    border: 1px solid;
}

.navi li a {
    display: block;
    padding: 20px 0px 14px;
    height: 80px;
}

.navi li:last-child a {
    background-color: #5ec6cd;
}

Comments

[kei344]

（質問文は編集できます）問題が再現するHTML/CSSを質問文にコードブロックで追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[miyabi_pudding]

kei344さんの質問修正依頼通り、コードを記載いただかないとなんとも言えませんが、おそらく下記のCSSがきいているのかと。
position: absolute
top
right

コードの記載とともにご確認下さい。

[ellelle]

コードを加えました。　お二方ともご親切にありがとうございます。

試行錯誤でいろいろと試しているのですが、コードが汚くなってきそうです　＞＜

Answer 1

HTMLやCSSのソースがないので勘で答えます。

横幅を指定しておらず、rightへの指定ががないときにこのような挙動になると思います。
つまり、以下のように指定していると推測します。

position: absolute;
top: 743px;
left: 0;

横幅いっぱいにしたいのなら、right: 0;を追加してください。
横幅いっぱいにしたいわけではないのなら、無視していいと思います。

Comments

[miyabi_pudding]

そのテクニックと仕様、初めて知りました。
なるほど！

[ellelle]

一応コードを追加しました。

実は、以下のような設定はまったくしていないのですが、position枠にそうでてくるのですよね…（ブレークポイントは769pxにしています）。

position: absolute;
top: 743px;
left: 0;

いくらデベロッパーツールで探してもこのような位置設定がかかってるのか分からず、質問のしようがないのかもですが、参考にさせていただきます。

[new1ro]

> .navi {
> width: 100%;　/* ←ムリして加えましたが、本来は指定不要だと思います */
> text-align: center;
> position: fixed;

経験則ですが、上記「width: 100%;」は必要です。

ヘッダーなどを横幅いっぱいにしたい場合以下の[1][2]のいずれかのパターンでの記述が必要です。

[1]
position: fixed; /* もしくはabsolute */
left: 0;
width: 100%;

[2]
position: fixed; /* もしくはabsolute */
left: 0;
right: 0;

個人的にwidthは、paddingなどの影響を受けて伸縮するのと、
leftだけ指定するのが左右対称じゃない感じが気持ち悪いので
後者の書き方のほうが好みです。

[ellelle]

お返事ありがとうございます。

width: 100%; は、見たところあってもなくても変化がないのですが、つけておきます。

2つの<li>は画面に固定したいので、position: fixed; のままにしておきます。

スマホ画面幅いっぱいにこの2つの<li>を横並びにさせたいので、両方とも

float: left;
width: 50%;

にしてて、一応、横並びになるのですが…、

デベロッパーツールでスマホの機種幅（iPhone, Galaxy, Moto etc）を変えると、微妙にどこかレイアウトがずれるのが気になります。これはブレークポイント（769px）を一つしか設定してないからなのでしょうか？

正確なレイアウトにするには、スマホ用設定としても、2〜3（例：320px、360px、414px）のブレークポイントをつけるべきと言うことでしょうか。

ちなみに、<li>をそれぞれ　floatをleftとrightとに分けてみるところですが、ご提案の方法も試してみます。

[ellelle]

[1]
position: fixed;
left: 0;
width: 100%;

[2]
position: fixed;
left: 0;
right: 0;

両方とも効果ありました！

width: 100%;を外して、left: 0;（または、 right: 0;）のみだと、画像のようなポジション枠になってしまうので、確かに、 [1]か[2]の設定が有効なようです。

とても助かりました！　ありがとうございます⭐︎