当前位置:  开发笔记 > 编程语言 > 正文

你怎么会让两个<div>重叠?

如何解决《你怎么会让两个<div>重叠?》经验,为你挑选了2个好方法。

我需要两个div看起来有点像这样:

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

什么是使它们整齐重叠的最佳/最优雅方式?徽标将具有固定的高度和宽度,并将触及页面的顶部边缘.



1> Owen..:

我可能会这样(CSS和HTML):

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; /* Reposition logo from the natural layout */
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; /* Provide buffer for logo */
}
#links {
  height: 75px;
  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}



2> TravisO..:

只需使用负边距,在第二个div中说:

并确保设置z-index属性以获得所需的分层.


这是迄今为止最简单的方法,并且可以通过在页面内容上使用margin-bottom轻松地适应重叠的页脚.谢谢!
这应该是公认的答案,绝对位置容易引起问题。
推荐阅读
谢谢巷议
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有