• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS定位中Positoin、absolute、Relative的一些研究
    Positoin属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。
      但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

    1、当Positoin属性值为Relative时
    对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置
    Top的值表示对象相对原位置向下偏移的距离
    bottom的值表示对象相对原位置向上偏移的距离
    两者同时存在时,只有Top起作用。

    left的值表示对象相对原位置向右偏移的距离
    right的值表示对象相对原位置向左偏移的距离
    两者同时存在时,只有left起作用。

    2、当Positoin属性值为absolute时
    对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来
    Top的值表示对象上边框与浏览器窗口顶部的距离
    bottom的值表示对象下边框与浏览器窗口底部的距离
    两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。

    left的值表示对象左边框与浏览器窗口左边的距离
    right的值表示对象右边框与浏览器窗口右边的距离
    两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

      在Positoin属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一视同仁,^_^)的Positoin属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
      更多有关CSS的说明请参考手册:https://www.jb51.net/shouce/css/index.html
      辛苦了半天得出的结论,希望对大家有用。如果有疏忽之处,还请指正。
    您可能感兴趣的文章:
    • javascript css styleFloat和cssFloat
    • javascript css float属性的特殊写法
    • css 跨浏览器实现float:center
    • CSS中Float(浮动)相关技巧文章
    • javascript下操作css的float属性的特殊写法
    • css position: absolute、relative详解
    • relative absolute无法冲破的等级问题解决
    • Div CSS absolute与relative的区别小结
    • position:relative/absolute无法冲破的等级
    • 解决rs.absolutepage=-1的问题
    • 详细分析css float 属性以及position:absolute 的区别
    上一篇:css 通配符用法总结
    下一篇:脚本控制三行三列自适应高度DIV布局的代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    CSS定位中Positoin、absolute、Relative的一些研究 CSS,定位,中,Positoin,absolute,