Question

如何让div覆盖其他div（比如.. dropdownlist）而不影响其他div的位置？

当您悬停#hidden时，我会显示#HoverMe div div，将其取消并再次隐藏。但那个div在徘徊时会移动其他div。

如何使hidden-div覆盖其他div？
如何让hidden-div不影响其他div位置？

它是怎么回事：

    ------    ------   ------
   |  1  |  |   2   | |  3   |  //#HoverMe div is not hovered
    ------   -------   ------
             ______
    ------  |      |  -------   ------
    |  1  | |Affect| |   2   | |  3   |  ////#HoverMe div is hovered, affects others div positions
    ------  |      |  -------   ------
             ------

我想要什么

             ______
    ------  |  No  |----   ------
    |  1  | |Affect| 2  | |  3   |  //Just overlay, without affecting others divs positions
    ------  |      |---   ------
             ------

我的代码：

<script>
$(document).ready(function(){
    $("#HoverMe").hover(function(){
        $("#hidden").css('display', 'block');
    }, function() {
        $("#hidden").css('display', 'none');
        }
    );

});
</script>

我使用#HoverMe - div显示#hidden - div，其中包含我要显示的内容列表。

 <div id="HoverMe" >
     This owner own @Html.DisplayFor(model => model.TotCar) cars in total
 </div>              

 <div id="hidden" style="background-color: black"> //<------- hidden
     @foreach (var car in Model.Car) { 
         <div>@car.Name</div> 
      }
</div>

Answer 1

将position:absolute添加到#hidden div，它应该有效。

JQuery / CSS：Div-overlay并不影响其他div的位置

1 个答案: