顶部导航开始 -->

html如何实现定位功能(上)

html如何实现图片定位功能,比如网页的导航条,如何使用图片定位知识。

如下图中的导航条,跟随鼠标的移动,会有光标的效果,实际上,并不是多个图片或者js效果实现的,知识简单的用到了图片定位的技术。

整个到航条只是一张图片,有带背景的部分和不带背景的部分,显示的时候,用定位技术,显示适当的位置就可以了。

自学php博客

本篇文章介绍定位技术的基础知识:

<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>




自学php博客
请先登陆后发表评论
  • 最新评论
  • 总共0条评论
  • © 2014-2016 zixuephp.cn 版权所有
  • ICP证:皖ICP备16012107号
  • 联系邮箱:510082587@qq.com
  • 交流请加微信:weibobf2899 或扫下方二维码