新建一个html文件,命名为test.html,用于讲解怎么用js修改z-index数值。
在test.html文件内,使用div标签创建两个模块,并分别设置其id属性为div1,div2。
使用css对两个div进行布局,分别设置两个div背景颜色,通过z-index设置id属性为div2的div显示在最前面,即红色背景div在前面显示,灰色背景div在后面显示。
在div的下面创建一个button按钮,并使用css设置按钮显示在div的下面。
给button按钮绑定onclick点击事件,当按钮被点击时,执行edit()函数。
在edit函数内,获得id为div1的div对象,改变其z-index属性,设置为3,让其显示在id为div2的div上面,即灰色背景div显示在前面。
在浏览器打开test.html文件,点击按钮,改变z-index值,使用灰色背景div显示在前面。
需要通过将Dom对象变为jQuery对象后,用他的css方法改变。var $logo = $("#domID")
$logo.css({"z-index":"999"})
z-index属性用于设置对象相对于页面在三维空间上的高度,这个需要把页面想象成立体的就明白了
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)