HTML5开发 |
您所在的位置：网站首页 › 两个div叠加 › HTML5开发 |
|
在很多情况下都需要实现两个div的重叠（包含层级关系），实现的方法也和div中属性设置的不同也是不一样的，尤其是 position 和 display 的变化. 但是总体上就是对margin（ 盒模型 ）和top（ 定位 ）等的运用。margin是属于盒模型中的一部分，修改了margin，就是修改了div元素的大小，但是修改了定位，只是修改了 自己本身的位置 ，不修改元素占用的大小，也不会干扰其他元素的位置。 1. 但是依靠margin来重叠有很大的 局限性 ，图片如下： 这是设置了 黄色div块的margin-top 才实现的，你也可以设置 蓝色div的margin-bottom。 如果你设置黄色div的margin-bottom就不能实现重叠的效果。 2. 当两个div的position为 relative 时，可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时，优先级为topbottom，leftright，优先级高的会屏蔽低的。 3. 当两个div的position为 absolute 时，那么父元素必须设置一个 定位 属性（不能为默认的static），这样子div才能相对于父div布局。啥意思？是一个div覆盖在另一个div上面么？可以用div嵌套div啊，就在里面了。如果是同级那要用定位哦，把需要重叠上去的div设置positive：absolute；再设置left和top值，css的hover就能实现（但不兼容IE6，因为IE6不支持a标签以为的hover，想兼容ie6需要用js） 首先需要用的position设置绝对或相对位置然后用z-index设置层叠高度（数越大越在最上面，可以为负数） 然后当hover时将其z-index的值改的很大就可以了 JS同理 这里指提供思路，具体怎么写可以好好研究研究有助于你的提高 纯手动望采纳 欢迎分享，转载请注明来源：内存溢出 原文地址:https://outofmemory.cn/zaji/7554691.html |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |