如何使一个元素位于其他元素表面而不挤压页面造成页面平移

今天主要要说的是实现下面这个功能的过程中遇到的问题。

这个需求是这样的：给链接加一个hover事件，当鼠标移上去的时候，显示弹框。当鼠标移开的时候，弹框消失。

这篇博客将一个问题：如何使一个大弹框在一个很小的空间里完全铺开，并且不挤压其他元素使页面平移。

正常如果我们把这个div放在链接上面，它会把链接挤到最下面（如下图1）。如果我们把它放在链接下面，它就会把本来位于页面最底部的链接等几个图片挤上去。

显然这都不是我们要的效果（如下图2）。

图1

图2

那个我们要实现这个功能就要设法使得这个div在不挤压其他div的同时，铺在其他div表面上。

其实这个问题并不难。难的是我一个做后台的，你让我写前端。

废话不多说，解决问题吧！

这里用到了一个属性，margin：用于设置属性的外边距。

设置ihzehs看下面这两个图 

图3:设置属性为margin-top:10px; 因此子div与父div顶部的距离为10px

图4:设置属性为margin-top:-10px;效果如你们所见。

因此，如果我上下左右的margin值都为负数的话，子div就可以完全覆盖父div，而不造成页面平移。

我最终的效果就是通过给那个div设置margin属性来实现的。