#每日总结#

Posted 2020-06-24

[遇到的问题]

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>