当前位置 博文首页 > 文章内容

    cssposition,CSS关于position定位的几种方式

    作者:Tan09wlll 栏目:Tan的日记 时间:2021-03-01 16:36:37

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



         CSS关于position定位的几种方式。

    1 定位的分类

         static:定位默认值

         relative:开启元素的相对定位

         absolute:开启元素的绝对定位

         fixed:开启元素的固定定位

         sticky:开启元素的粘滞定位

    2 具体实现方式

         相对定位通过position: relative开启元素的相对定位相对定位的相对位置参照于元素在文档流中的位置,也就是它自己,而且相对定位会提升元素的文档流,且元素不会脱离文档而造成塌陷。开启元素相对定位之后,如果不设置偏移量,元素位置不会发生任何变化,可通过设置元素的偏移量对元素位置进行调整。

         top: 定位元素和定位位置上边的距离;

         bottom:定位元素和定位位置下边的距离

         left:定位元素和定位位置左边的距离

         right:定位元素和定位位置右边的距离

         特点:1、开启相对定位之后不设置偏移量元素不会发生任何变化; 2、相对定位参照元素在文档流中的位置进行定位; 3、相对定位会提升元素的层级; 4、相对定位不会脱离文档流且不会改变元素性质;

         绝对定位通过position:absolute开启元素绝对定位特点: 1、开启绝对定位之后不设置偏移量,则位置不会发生变化; 2、绝对定位后,元素会脱离文档流; 3、绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开; 4、绝对定位会提升元素层级; 5、绝对定位是相对于其保护块进行定位;

         固定定位通过position:fixed开启元素绝对定位特点与绝对定位基本一致

         参照位置永远参考浏览器的视口进行定位,即(0,0)坐标,例如网页小广告

         粘滞定位通过position:sticky开启粘滞定位

         position:sticky; // 开启粘滞定位top:0; // 开启粘滞定位元素到该位置时固定特点与相对定位基本一致

         参照位置参考包含块

         以上即为CSS定位的几种方式。