为什么 css 应用于 Chrome 和 FF 中的模态 window 的方式不同？

Question

我今天回答了另一个问题，模态 window 在 FF 中有可点击的按钮，在 Chrome 中有不可点击的按钮。

尽管我已经解决了 chrome 将模态父项的 z-index 设置为 0 而 FF 将其设置为 auto 的问题。

在下面的演示中，modal window 被放置在 .fixed div 内。为了解决这个问题，我将 z-index 设置为 .fixed div 多于 .modal-backdrop（比方说 1041）。然后我就想为什么我不能把.fixeddiv的z-index自己设置成auto因为FF设置成auto，但是还是不行Chrome。谁能解释一下这里发生了什么。

$(function(){
  $('.modal-body > span').html($('.fixed').css('z-index'));
});

.fixed{
      position: fixed;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal testing</h4>
            </div>
            <div class="modal-body">
              z-index: <span></span>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 1

z-index 设置 stacking context 中元素的顺序。模态内容的父元素上的 position:fixed 将其置于与 .modal-backdrop 不同的堆叠上下文中，用于隐藏页面的其余部分。

常见的解决方案是将页面中模式内容的所有实例作为 body 元素的直接子元素放置，在页面加载后，使用此行：

$('.modal[role="dialog"]').appendTo('body');

$(function(){
  $('.modal-body > span').html($('.fixed').css('z-index'));
});

$('.modal[role="dialog"]').appendTo('body');

.fixed{
    position: fixed;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal testing</h4>
            </div>
            <div class="modal-body">
              z-index: <span></span>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

为什么 css 应用于 Chrome 和 FF 中的模态 window 的方式不同？

Why there is a difference in the way css is applied to the modal window in Chrome and FF?

css

firefox

google-chrome

bootstrap-modal