html如何实现图片定位功能，比如网页的导航条，如何使用图片定位知识。
如下图中的导航条，跟随鼠标的移动，会有光标的效果，实际上，并不是多个图片或者js效果实现的，知识简单的用到了图片定位的技术。
整个到航条只是一张图片，有带背景的部分和不带背景的部分，显示的时候，用定位技术，显示适当的位置就可以了。
本篇文章介绍定位技术的基础知识：
<html>
<head>
.div1{
width:500px;
height:300px;
position:absolute;}
span{ display:block;
position:absolute;
left:100px;
}
</head>
<body>
<div class="div1">
<span></span>
</div>
</body>
</html>
一：绝对定位 absolute
static:默认值，无定位
position:absolute;
top:100px;离父类的上边界距离100px;
bottom:
left:
right:
Notice:例子中的span标签是绝对定位，包含他的DIV也是绝对定位，所以span的定位是以父类DIV为标准定位，如果DIV没有定位，他的定位标准会一直往外找，一直找到上一级的绝对定位，如果没有刘一直找到body为止。
二、相对定位 relative
是只相对于原来应该出现的位置的定位，
<html>
<head>
.div1{
width:500px;
height:300px;
position:static;}
span{ display:block;
position:relative;
left:100px;
}
</head>
<body>
<div class="div1">
<span></span>
</div>
</body>
</html>
三、fixed 生成绝对定位，位置是相对于浏览器窗口的定位，与浏览器上面和左边的位置不变，滚动滚动条不影响他的位置
@@@@@定位方式为默认定位方式static，设置left、right、bottom、z-index等属性不起作用。
四、z-index属性设置元素堆叠顺序
z-index只能在定位元素后面使用
作用：弹出层的作用
<html>
<head>
.f1{
width:500px;
height:300px;
background:black;
position:relative;
z-index:1px；
}
f2{
width:500px;
height:300px;
background:black;
position:relative;
z-index:100px；
}
</head>
<body>
<div class="f1">
<span></span>
</div>
<div class="f2">
<span></span>
</div>
</body>
</html>
宠物免费领养小程序，欢迎来踩
