JQuery / CSS：Div-overlay并不影响其他div的位置 [英] JQuery/CSS: Div-overlay and not affect positions of other divs

问题描述

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

How to make div overlay others div (like.. dropdownlist) and not affect others divs positions?

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

I've a #hidden div that appears when you hover a #HoverMe div, unhover it and it hides again. But that div moves others div when hovered.

1. 如何使hidden-div覆盖其他div？

1. How to make hidden-div overlay other div?

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

how do I make that hidden-div not affecting others div position?

它是怎么样的：

    ------    ------   ------
   |  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，其中包含我要显示的内容列表。

I use my #HoverMe-div to show #hidden-div that have a list of content I want to show.

 <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>

推荐答案

添加 position：absolute 到 #hidden div它应该可以工作。

Add position:absolute to #hidden div and it should work.

这篇关于JQuery / CSS：Div-overlay并不影响其他div的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！