Question

所以我正在为我的网站建立页脚，我想将1 div放在另一个页面后面。

第一个div只是一个从左到右全屏的黑色背景。所以这个div超出了网站的标准边界。

#special_div {
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    text-align: middle;
    background-color: #000;
    z-index: -2;
    top: 775px;
}

第二个div只是一个包含内容，链接，搜索栏等的div。这个div没有网站的边界。

如何将黑色背景置于第二个div后面？我无法将其合并为1 div，因为内容超出边框或背景停留在边框内。

我的问题有解决办法吗？

示例：

http://jsfiddle.net/hmc5v1rc/

Answer 1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>How do i position 1 div behind another one</title>
</head>

</head>
<style type="text/css">
.div{position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    text-align: middle;
    background-color: #000;
    z-index: -2;
    top: 775px;
    color:#FFF;
}
#div{
    color:#FFF;
}
</style>
<body><div class="div"> 
  <div id="div">Content for  second "div" Goes Here inside 1st div</div>
</div>
</body>
<body>
</body>
</html>

Answer 2

为什么不做这样的事情？

CSS

ul{overflow:hidden}
li{float:left;padding:10px}

HTML 

<div style="background:black">

  <div style="width:1000px;margin:0 auto">
    <ul>
     <li><a title="" href="#">Link</a></li>
     <li><a title="" href="#">Link</a></li>
     <li><a title="" href="#">Link</a></li>
    </ul>
  </div>

</div>

我如何将1 div放在另一个后面

2 个答案: