
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现。
position:absolute;position:relative绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。
例子:
首先是JS实现二级菜单的展现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <script language="javascript"> function tab(tag, className, isDisplay) { var list = document.getElementsByTagName(tag); for (var i = 0, len = list.length; i < len; i++) { if (list[i].className == className) { if (isDisplay == 1) { list[i].style.display = "block" } else { list[i].style.display = "none" } } } } </script> </pre> 页面代码: <pre lang="html" line="1" escaped="true"> <div style="float:left; position:relative">
##学校 <span class="bianh"> <a herf="#">[切换]</a></span> <div style="position:absolute; left:40px;" onmousemove="tab('div','selectschool',1)" onclick="tab('div','selectschool',2)"> <a herf="#">中南民族大学</a> <a herf="#">XXXX大学</a> </div> </div>
|