[遇到的问题]
1.position定位与z-index的问题。
做首页轮播图,发现轮播图片定位之后会覆盖导航栏。
解决办法:
>>> : 1.将导航栏的z-index值设置高一些,让它的级别高于轮播图片。
这样产生了第二个问题:导航栏内部的弹框被覆盖了。
解决办法:
>>> : 将弹框与导航栏代码同级,这样就可以解决导航栏设置了z-index较高的值之后覆盖弹框的问题。
可是又产生了第三个问题:弹框占据了轮播图片部分的位置。
解决办法:
>>> : 将弹框绝对定位,这样它们就会从文档流中剔除。不占据任何位置。
结论:所有定位问题的来源都是父子级关系的原因。要解决定位问题就先从html父子级结构着手。
[学习新知识]
1.使用easyui的layout布局。
layout可以将元素拆分成上(north)、下(south)、左(west)、右(east)、中央(center)五个部分,这样的话就是横排3行,竖排3列。但是假设需要横排4行或者更多、竖排4列或者更多时,就只能将已经拆分的那部分继续拆分,这是easyui多个布局的方式。
2.jquery里面改变节点顺序的方法:
在写轮播图代码的时候,实现了另一种通过改变节点顺序来显示图片的方式,这样可以不需要用到定位。
假设页面上有一个ul,里面有3个li,结构如下:
<ul id=‘parent‘> <li id=‘node1‘></li> <li id=‘node2‘></li> <li id=‘node3‘></li> </ul>
有两个方法可以改变li的顺序:
>>>方法1 :$(A).prepend($(B)) 将B放置到A的开头,始终是第一位。
js代码如下:
$(function(){ $(‘#parent‘).prepend($(‘#node3‘)); //将第3个<li>放到<ul>的第一位 })
执行之后的结果:
<ul id=‘parent‘> <li id=‘node3‘></li> <li id=‘node1‘></li> <li id=‘node2‘></li> </ul>
>>>方法2 :$(A).inserBefore($(B)) 将A放置到B之前。同样的有$(A).inserAfter($(B)) 表示将A放置到B之后。
js代码如下:
$(function(){ $("#node1").insertAfter($("#node2")); //将第1个<li>放置到第2个<li>之后 })
执行之后的结果:
<ul id=‘parent‘> <li id=‘node2‘></li> <li id=‘node1‘></li> <li id=‘node3‘></li> </ul>