CSS学习之相对定位和绝对定位

1>位置属性position

    position的值包括 relative(相对定位)、 absolute(绝对定位)、fixed(固定位置)、 static 等

        不设置时默认就是static。

        CSS学习之相对定位和绝对定位_第1张图片

        设置定位之后,top、left、right、bottom属性值可以使用。

2>相对位置

     相对于自身进行定位
1>不设置偏移量的时候 对元素没有任何影响,设置了偏移量,则基于自身初始的位置进行偏移

2>可以提升层级关系 

    如下,初始三个盒子,设置第一个盒子相对定位,设置偏移,效果如下,

    CSS学习之相对定位和绝对定位_第2张图片

    都设置相对定位,偏移

    CSS学习之相对定位和绝对定位_第3张图片

    如上,因代码执行顺序至上而下,所以最后设置相对定位的,层级最高,在最上面显示了,那么,如果要

    使前面的显示最上面,或者干脆改变层级关系,让他根据需求自定义显示,该怎么设置呢?

    这里引入一个z-index属性,默认值为0,值设置越大,则层级关系越大,

    如下,把蓝色盒子的z-index设置为2,则置顶显示了,若要把绿色提上来,则需设置绿色盒子的z-index值大于2。

    CSS学习之相对定位和绝对定位_第4张图片

3>绝对位置

    初始两个盒子,父子关系的,如下

    CSS学习之相对定位和绝对定位_第5张图片

    父盒子未设置位置属性,子盒子设置绝对位置时

    CSS学习之相对定位和绝对定位_第6张图片

     父盒子未设置位置属性相对位置,子盒子设置绝对位置时

    CSS学习之相对定位和绝对定位_第7张图片

    根据上面,可总结如下

     1>在没有父级元素定位时,以浏览器的左上角为基准

2>有父级的情况下,父级设置相对定位,子级设置绝对定位 是以父盒子进行定位的

    实际项目开发当中,这种“父相子绝”的样式手法经常用到。-----父相对,子绝对

4>固定位置

    顾名思义,固定在浏览器某个位置,

    初始两个div盒子,

    CSS学习之相对定位和绝对定位_第8张图片

CSS学习之相对定位和绝对定位_第9张图片

    这,就是固定位置,很容易想到它的使用场景,比如平常浏览网站,不管如何滚动网站,网页右侧的

    那些“联系客服”的图标,一直在那。

总结:

    CSS学习之相对定位和绝对定位_第10张图片


你可能感兴趣的:(前端开发)