css定位总结

定位position: static(默认)、fixed(固定定位)、absolute(绝对定位)、relative(相对定位)、sticky(粘性定位)

1. fixed 

    特点:不占空间、不随滚动条移动

    相对于浏览器窗口进行定位,不占空间;

    如果不设置定位坐标,则就在原来的位置;

    如果结合定位坐标,就是相对于目标位置的距离;

    层级要比普通标签高;

    设置固定定位后,就一定是块元素

2. relative

    特点:占空间、不脱离文档流的布局

    如果不设置定位坐标,则就在原来的位置;

    如果结合定位坐标,则是相对自身的距离;

    层级要比普通标签高

3. absolute

    特点: 不占空间、脱离文档流的布局

    层级比普通标签高;

    (谁设定位就跟着谁)绝对定位如果有定位坐标,则以祖先元素(需设置position为relative/absolute/fixed)作为坐标的参考;

    如果祖先没有设置定位(relative/absolute/fixed),则一直往上找,直到找到body,就以body来进行定位,即相对于整个窗口来定位;

    定位的起始位置为最近的父元素(position为relative/absolute,不能为static)

    总之:当某个absolute定位元素的父元素具有position: relative/absolute/fixed时,定位元素都会依据父元素定位,而父元素没有position属性或者设置了默认属性(static),那么会根据body来定位

4. sticky

    是relative和fixed的混合,在屏幕范围内时,没有影响(relative),当要移除屏幕范围时,会变成fixed

    特点:

    该元素并不脱离文档流,仍然保留元素原本在文档流中的位置,即在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效);

    当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果(父元素的overflow属性需是默认值visible属性);

    sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效;

   demo:

    

5. 补充知识点

    z-index属性 仅能在定位元素上生效

    技巧: css实现字体文本span总在其它元素上面?

    实现方案:1)将父元素设置为position:relative

                       2)再将文本span设置为position:absolute

                       3)最后将span的z-index属性设置为一个较大的值 如z-index:999

展开阅读全文

没有更多推荐了,返回首页