html如何点击一个超链接,在网页上打开一个浮动小页面,实现层叠显示

html如何点击一个超链接,在网页上打开一个浮动小页面,实现层叠显示,第1张

<a href="javascript:void(0)" onclick="xxx()">点击</a>

function xxx(){

..........................

}

需要配合javascript才可以的

在很多情况下都需要实现两个div的重叠(包含层级关系),实现的方法也和div中属性设置的不同也是不一样的,尤其是 position 和 display 的变化. 但是总体上就是对margin( 盒模型 )和top( 定位 )等的运用。margin是属于盒模型中的一部分,修改了margin,就是修改了div元素的大小,但是修改了定位,只是修改了 自己本身的位置 ,不修改元素占用的大小,也不会干扰其他元素的位置。 1. 但是依靠margin来重叠有很大的 局限性 ,图片如下: 这是设置了 黄色div块的margin-top 才实现的,你也可以设置 蓝色div的margin-bottom。 如果你设置黄色div的margin-bottom就不能实现重叠的效果。 2. 当两个div的position为 relative 时,可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时,优先级为top>bottom,left>right,优先级高的会屏蔽低的。 3. 当两个div的position为 absolute 时,那么父元素必须设置一个 定位 属性(不能为默认的static),这样子div才能相对于父div布局。

css的hover就能实现(但不兼容IE6,因为IE6不支持a标签以为的hover,想兼容ie6需要用js)

首先需要用的position设置绝对或相对位置然后用z-index设置层叠高度(数越大越在最上面,可以为负数)

然后当hover时将其z-index的值改的很大就可以了

JS同理

这里指提供思路,具体怎么写可以好好研究研究有助于你的提高

纯手动望采纳


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8300379.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存