首页 > 教程 > 技术文章 正文

position的8种定位方式

原创2020-03-02 19:39:27 0 410


一、常见/用的四种

1.static

positon定位的默认值,没有定位

2.relative

生成相对定位的元素,相对于其正常位置进行定位,一般在子元素设置absoute定位时,给父元素设置relative

元素的位置通过top、right、bottom、left  控制,其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

3.absoute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

元素的位置通过top、right、bottom、left  控制,top、left的定位起点是包含块左上角,right、bottom的定位起点是包含块右下角

4.fixed  (ie6不兼容)

生成绝对定位的元素,相对于浏览器窗口进行定位,和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)

元素的位置通过top、right、bottom、left  控制,top、left的定位起点是包含块左上角,right、bottom的定位起点是包含块右下角

 

二、不常用的四种 

1.inherit

规定应该从父元素继承 position 属性的值

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

兼容:ie7及以下版本不支持此属性

2.initial 

设置positon的值为默认值(static)

兼容:ie不支持此属性

问:有了static为什么还会存在此属性,不是多此一举?

答:initial 关键字可用于任何 HTML 元素上的任何 CSS 属性,不是postion特有的

3.unset

设置positon的值为不设置:

如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承),该值等同于 inherit
如果该属性的默认属性 不是继承属性(例如pisition的默认属性为static),该值等同于 initial

兼容:ie不支持此属性

4.sticky

css3新属性,它的表现就像position:relative和position:fixed的合体:

1.在目标区域在屏幕中可见时,它的行为就像position:relative;

1.png

2.页面滚动时

 当父元素是body时

   a.滚动距离小于屏幕高度或宽度,它会固定在目标位置

  2.png

   b.滚动距离大于屏幕高度或宽度,它的表现就像position:relative和1一样

  3.png

当父元素不是body,在父元素高度内滚动时它会固定在目标位置,就像fixed

在父元素滚动为不可视时它的表现就像position:relative和1一样

 兼容: ie不兼容、google不完全兼容(thead、tr标签不支持)、firefox59以后兼容,之前版本不完全兼容(table标签不支持)

以上就是《position的8种定位方式》的详细内容,更多请关注 “一流设计在线”其它相关文章!

  • 相关标签:混合活动内容Firefox火狐HttpsHttp
  • 本文由一流设计在线原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 抗击新型冠状病毒感染肺炎

      简介:抗击新型冠状病毒感染肺炎

    • 春节好

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    教程分类
    [!--date--]Y-m-d[!--date--]