Is there a way to make a div overlay other divs (like a dropdown list) without affecting the positions of other divs?
I have a #hidden div that appears when you hover over a #HoverMe div, but it moves the position of other divs when hovered.
How can I make the hidden-div overlay other divs?
How can I prevent the hidden-div from affecting the positions of other divs?
This is what currently happens:
------ ------ ------
| 1 | | 2 | | 3 | //#HoverMe div is not hovered
------ ------- ------
______
------ | | ------- ------
| 1 | |Affect| | 2 | | 3 | ////#HoverMe div is hovered, affects others div positions
------ | | ------- ------
------
Desired outcome:
______
------ | No |---- ------
| 1 | |Affect| 2 | | 3 | //Just overlay, without affecting others div positions
------ | |--- ------
------
My code snippet:
<script>
$(document).ready(function(){
$("#HoverMe").hover(function(){
$("#hidden").css('display', 'block');
}, function() {
$("#hidden").css('display', 'none');
}
);
});
</script>
I am using my #HoverMe-div to display content in #hidden-div which consists of a list of items I want to show.
<div id="HoverMe" >
This owner owns @Html.DisplayFor(model => model.TotCar) cars in total
</div>
<div id="hidden" style="background-color: black">
@foreach (var car in Model.Car) {
<div>@car.Name</div>
}
</div>