z-index と position:absolute を同時に設定した時に要素の重なりが思ったとおりにならない

Question

こんにちは！
以下画像のような配置でモーダルを作成しようと思ったのですがうまくいきません。

理解できないのがtop: 30px;を設定すると思った通りの配置になります。
なぜposition: absolute;を設定しているのに、画面左上からの配置にならずli要素の下からの配置になるのでしょうか。

詳しい方教えていただけますと幸いです。

やりたい配置

1. モーダルのdiv要素にposition: absolute;を設定して画面左上に配置
2. margin-top: 30px;を設定し、画面最上部から30pxマージンを設けたい

現状

モーダルのdiv要素にposition: absolute;を設定しているので、画面左上に配置されると思いきや、li要素の下に配置されてしまう

コード

<ul>
  <li><a>サンプル請求</a></li>
  <li><a>サンプル請求_完了</a></li>
</ul>
<div id="modal_wrap">
  <div id="sampleForm-input" class="modal-content">
  </div>
  <div class="modal-overlay"></div>
</div>

.modal-overlay {
  z-index: 1;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
.modal-content {
  z-index: 2;
  display: block;
  position: absolute;
  width: 300px;
  height: 300px;
  margin-top:30px;
  background: #fff;
}

Comments

[Lhankor_Mhy]

ご提示のコードを当方で試してみましたが、一つ目のスクリーンショットのようになりました。
つまり、問題が再現しません。

[kg1008]

失礼いたしました！
cssの .modal-content に top: 30px;の指定がありましたので削除しました。
今回の疑問としましては top: 30px; の指定が無い場合でも思ったとおりの配置になるのではないか、ということでした。

[Lhankor_Mhy]

確認いたしました。
bodyからずれてしまう理由は、cerfweb さんのコメントの通り、こういうことです。

---
auto
以下のように指定します。
・絶対位置指定要素では、要素の位置は bottom プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 bottom も auto であった場合は、要素は垂直方向には**静的要素が配置される場合と同様**に配置されます。
https://developer.mozilla.org/ja/docs/Web/CSS/top#Values
---

top は初期値が auto なので、指定しない場合は、auto として扱われます。

[kg1008]

ありがとうございます！

>要素は垂直方向には**静的要素が配置される場合と同様**に配置されます。

絶対位置指定要素はそういう仕様だったのですね！
理解することができました！

Answer 1

HTMLの入れ子の関係でそうなっているのではないでしょうか。position: absolute;を設定する場合はその親要素または親の親と遡って一番近いposition: relative;またはfixed;の設定された要素に対してtopやleftの位置が決まります。
ですので、以下のように書き換えれば解決するのではと思われます。

<div class="modal-overlay">
  <div id="sampleForm-input" class="modal-content">
  </div>
</div>

Comments

[kg1008]

回答ありがとうございます！
仰る内容にで思っていた配置になりました！
しかしなぜ私の書いたコードだとなぜ思ったとおりの配置にならないのでしょうか？
階層的に親要素はbodyになる？のでtopプロパティは画面最上部が基準になるのではと思うのですが。

[kg1008]

また.modal-overlay要素（モーダルの背景）をクリックすることでモーダルを閉じる仕様にしたいので、z-indexで重なりをモーダルの背面に持ってきています。
教えていただいた内容ですと.modal-overlay要素がモーダルの前面に配置されてしまいますので、モーダル部分をクリックしても閉じてしまうという問題があります。

何かいい方法はありませんでしょうか。。。

[cerfweb]

> しかしなぜ私の書いたコードだとなぜ思ったとおりの配置にならないのでしょうか？
position: absolute; を指定した要素にtopやleftなどを何も指定しないと、親要素の位置関係やスタイルに思わぬ影響を受けるものと思っておいた方がいいかもしれません。お試しください。
> 教えていただいた内容ですと.modal-overlay要素がモーダルの前面に配置されてしまいます...
意味がよくわかりません。z-indexを指定せずとも画像で示されている重なり方になりませんか？
#modal_wrapの子要素が.modal-overlayでその子要素として.modal-contentとしてた場合で「.modal-overlay要素がモーダルの前面に配置される」というのがどういうことかわかりません。モーダルというのはその場合何を指して仰っているのでしょうか。

[kg1008]

ありがとうございます！

>position: absolute; を指定した要素にtopやleftなどを何も指定しないと、親要素の位置関係やスタイルに思わぬ影響を受けるものと思っておいた方がいいかもしれません。お試しください。

そうですね！指定するようにしたいと思います。

>#modal_wrapの子要素が.modal-overlayでその子要素として.modal-contentとしてた場合で「.modal-overlay要素がモーダルの前面に配置される」というのがどういうことかわかりません。モーダルというのはその場合何を指して仰っているのでしょうか。

失礼しました。.modal-content要素をモーダルと呼んでいました。
教えていただいたコードですと.modal-content要素の前面に.modal-overlay要素が表示されてしまい、.modal-content要素がクリックできないという問題があるということをお伝えしたかったです。

[kg1008]

修正依頼蘭のLhankor_Mhyさんのコメントでさらに理解を深めることができました！

---
auto
以下のように指定します。
・絶対位置指定要素では、要素の位置は bottom プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 bottom も auto であった場合は、要素は垂直方向には**静的要素が配置される場合と同様**に配置されます。
https://developer.mozilla.org/ja/docs/Web/CSS/top#Values
---

>要素は垂直方向には**静的要素が配置される場合と同様**に配置されます。

絶対位置指定要素の仕様をよく理解していませんでした。
丁寧に教えていただきありがとうございました！