如果点击某个div层置顶显示的话
需要用到Z-index 值
而使用zIndex值 就必须对元素进行绝对定位
可以用如下方法 让被点击的层置顶
//创建一个公共Z值var z=999
//然后获取所有div
var aDiv=document.getElementsByTagName('div')
//遍历元素
for(var i=0i<aDiv.lengthi++){
//添加事件
aDiv[i].onclick=function(){
//控制当前点击的div每次点击就z++
//比如这次点击了z值到了1000
//然后下一个div点击的时候
//把这个值赋给他 然后他还++一次 变成1001
//这样那个又是最高的了
this.style.zIndex=z++
}
}
<html><body>
<ul>
<li onclick="topLine(event)">111</li>
<li onclick="topLine(event)">222</li>
<li onclick="topLine(event)">333</li>
</ul>
</body>
</html>
<script type="text/javascript">
//思路:获取当前行,复制,删除,插入到第一行。
var topLine = function(event){
event = event || window.event
var t = event.currentTarget,$t = $(t)
var html = t.outHTML
$t.remove()
$t.parent().find('li:first-child').before(html)
}
</script>
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下:<div class="nav">这里是导航所在的DIV容器。</div>
CSS代码:
.nav{
position:fixed/* 绝对定位,fixed是相对于浏览器窗口定位。 */
top:0/* 距离窗口顶部距离 */
left:0/* 距离窗口左边的距离 */
width:100%/* 宽度设置为100% */
height:40px/* 高度 */
z-index:99/* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式,原理及大致内容请看css代码注释