jquery - 覆盖不会覆盖动态添加的元素

Question

问题背景:

我有一个 MVC 应用程序，它的数据通过 jQuery 呈现，然后附加到应用程序 View 中的一个空 div。叠加层附加到包含这些元素的 div，并且应该覆盖所有 View 。

问题:

我可以添加一个叠加层，它在 View 中呈现，但是通过 jQuery 生成的元素没有被覆盖，它们被放置在叠加层之上，如图所示，而不是在叠加层之下 :

可以看出，叠加层正在渲染(用灰色表示)，但元素位于其之上。

代码:

叠加样式:

.overlay{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

元素附加到的 Overlay 容器:

<div id="myNav">
        <div id="containerId" class="container">
            <div class="topOffSet">
                <div class="col-lg-12">
                    <div id="itemHolder">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 text-center">
                    <ul id="pagination-demo"></ul>
                </div>
            </div>
        </div>
    </div>

jQuery 用于将模型项附加到上面的 ItemContainer div:

           for(var g = 0; g < arrayLength; g++)
            {
                var urlImage = '@Url.Content("~/Images/")';

                var fullSourceImg = urlImage + pageItems[g].img;

                htmlToAdd += '<div class="col-lg-4">'+
                                '<div class="panel panel-default maxPanelHeight">'+
                                    '<div class="panel-heading textOverflow" id="panelHeading">'+
                                        '<h3 class="panel-title text-center"><b>'+pageItems[g].Title+'</b></h3>'+
                                    '</div>'+
                                    '<div class="panel-body">'+
                                        '<a href="'+pageItems[g].url+'" target="_blank"><img src="'+pageItems[g].Image+'" class="picHeight img-rounded img-responsive center-block" /></a>'+
                                        '<h4 class="text-center"><b>'+pageItems[g].Price+'</b></h4>'+
                                        '<h4 class="text-center"><a href="'+pageItems[g].url+'" class="btn btn-success" target="_blank">See More</a></h4>'+
                                        '<div class="text-center"><img class="originPic" src="'+fullSourceImg+'" /></div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'
            }

            $('#itemHolder').append(htmlToAdd);

用于将 Overlay 类添加到 myNav 的代码:

 document.getElementById('myNav').className = 'overlay';

Answer 1

如果您只是更改容器元素的样式，则不会起作用。正如 Taplar 所说，它的 child 将永远在它之上。您应该做的是创建另一个元素作为叠加层，将其添加到容器中，为其指定绝对定位、100% 的宽度和高度以及足够高的 z-index。这将在该元素上创建一个覆盖层，从而覆盖您动态添加的子元素。