将一个div元素放在另一个元素上方

问题描述：

在下面的图片中，我想将浮木/炸弹图像放在图像正上方，因此，我想删除/折叠这两个div之间的“空间”。然而，这个差距并不是由标记本身造成的，因为正如你所看到的，“炸弹”正在使得图像的高度变大。将一个div元素放在另一个元素上方

enter image description here

我想定位在“头”（因此导航的棕色顶部只是头底部之下）导航栏，所以该间隙消失。这些图像意味着重叠。

我认为这可以使用CSS来完成。但是如何？无论哪种解决方案需要跨浏览器工作。

HTML：

<header></header> 
<nav></nav>

CSS：

header { 
    width: 980px; 
    height: 327px; 
    background: url(../images/header.png); 
} 

nav { 
    width: 980px; 
    height: 180px; 
    background: url(../images/menu.png); 
}

您可以发布您的HTML代码..或尝试添加浮动：左到两个 – Mukesh 2012-02-26 12:18:07

答

也许阴性切缘？

header { 
    width: 980px; 
    height: 327px; 
    background: url(../images/header.png); 
} 

nav { 
    width: 980px; 
    height: 180px; 
    background: url(../images/menu.png); 
    margin: -90px auto 0; 
}

http://jsfiddle.net/NmUfT/

答

相对定位可以解决这个给你：

nav { 
    position: relative; 
    top: -20px; 
}

这也适用：http://jsfiddle.net/NmUfT/1/ – 2012-02-26 12:22:23

我才意识到，这是把一个空间与'nav'下的'top'大小相同：http://jsfiddle.net/NmUfT/2/请参阅：http://stackoverflow.com/a/2280941/451969 – 2012-02-26 12:38:38

答

顶利润率为负值的确是你寻求。如果导航栏会在标题下消失，则应该更改导航的z-index。尝试不同的数字：100，1000，10000等。

答

将div放在标题div内。

nav { 
    position: relative; 
    bottom: -30px; 
    }

将一个div元素放在另一个元素上方

相关推荐