学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

CSS基础教程(十六) 定位Position

发布时间:2020-01-12 点击:53

    前面说了很多排版的标签元素属性,本次呢,我们来介绍一下CSS的定位Position属性。

    一、定位Position方式

    在CSS样式表中,定位Position属性有五个值,也就是说有五个定位方式:

    • static
    • relative
    • fixed
    • absolute
    • sticky

    二、static定位

    该定位方式是HTML文档的默认值,即没有定位,它遵循正常的文档流对象。(PS:静态定位的元素不会受到top,bottom,left,right属性的影响)。

    div.static {
        position: static;
        border: 3px solid #73AD21;
    }

    三、relative定位

    relative定位也叫作相对定位,其相对的是该元素正常的位置,不是其他参照物。

    span
    {
        position:relative;
        left:20px;
    }
    上述的意思是,span元素会在其本来应该显示的地方向左移动20px;

    四、fixed定位

    fixed定位是固定定位,该属性设置的是相对于浏览器窗口的定位,不随滚动条的滚动而变化(PS:常用来制作吸顶效果的导航栏或者侧边固定的广告栏)。

    p
    {
        position:fixed;
        top:30px;
        right:5px;
    }

    五、absolute定位

    absolute方位我们称作绝对定位,其相对的是最近的父元素节点定位,如果没有父元素节点,那么相对于HTML定位。

    <style>
    h2
    {
        position:absolute;
        left:100px;
        top:150px;
    }
    </style>
    <h2>hello mihuguan</h2>
    
    本例就是相对于HTML定位的,absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素会重叠。重叠元素的显示需要设置z-index属性来确定显示堆叠顺序。其z-index的值最大的,就会显示在前面(不会被遮挡)。

    六、sticky定位

    该定位也叫作粘性定位,它是相对定位relative和固定定位fixed的结合体,具备了两者的优势;

    它主要用在对scroll事件的监听上,简单说在滚动过程中,某个元素的距离其父元素的距离达到sticky粘性定位设置的值时, 效果就相对于 fixed 定位,固定到适当的位置。

    使用条件:

       1. 父元素不能设置 overflow:hidden; 或者 overflow:auto;  属性;

       2. 必须制定 top、bottom 、left 、 right 4个值之一,否则只会处于相对定位;

       3. 父元素的高度不能低于sticky 元素的高度;

       4. sticky 元素仅在其父元素内生效;

    <div style="position:sticky;top:0px;height:30px;background:pink;">我就是sticky</div>

    上述代码的运行结果这里就不贴了,因为需要动图,这里大致解释一下:上述代码运行的意思是当div随着页面的滚动到浏览器上不边缘时,就是说top:0xp,这时该div就不会再继续往上移动了,它的定位在此时被改成了fixed定位,当页面向上滚动时,该div到了原本的位置,它就会随着页面向下滚动,此时定位又换成了relative定位,也就是常说的 吸顶效果

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(1)     踩一个(1)    

相关链接

搜索

题库内容推荐

昵称:*
邮箱:
电话:
评论: