• 08CSS定位之position属性


    1. static静态定位/常规定位/自然定位
      作用:使元素定位于常规/自然流中
      特点:
      • 忽略top、bottom、left、right或者z-index声明
      • 两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的
      • 具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大沾满剩余宽度,造成的效果就是这个块水平居中
    2. relative相对定位
      作用:是元素成为containing-block,就是可定位的祖先元素
      特点:
      • 可以使用top、bottom、left、right、z-index进行相对定位
      • 相对定位的元素不会离开常规流
      • 任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位
      • 可以是浮动元素发生偏移,并控制它们的堆叠顺序
    3. absolute绝对定位
      作用:使元素脱离常规流
      特点:
      • 脱离常规流
      • 设置尺寸要注意:百分比比的是谁——最近定位祖先元素
      • top、bottom、left、right如果设置为0,它将对齐到最近定位祖先元素的各边——衍生出一个居中妙计
      • top、bottom、left、right如果设置为auto它将被打回原形
      • 如果没有最近定位祖先元素会认为<body>做父级元素
      • z-index可以控制堆叠顺序
    4. fixed固定定位
      作用:使元素脱离常规流
      特点:
      • 固定定位元素不会随着视口滚动而滚动
      • 继承absolute特点
    5. sticky磁贴定位/粘性定位/吸附定位
      作用:relative+fixed的完美结合,特造出吸附效果
      特点:
      • 如果产生偏移,原位置还是会在常规流中
      • 如果它的最近祖先元素有滚动,那么它的偏移标尺就是最近祖先元素
      • 如果最近祖先元素没有滚动,那么它的偏移标尺是视口
      • 上下左右的偏移规则
  • 相关阅读:
    Access restriction: The type BASE64Encoder is not accessible due to restrict(转载)
    ECLIPSE控制台信息导出
    ZUI分页器的使用案例(ECLIPSE SMS项目)
    关于PLSQL启动用时较长的问题解决
    javax.naming.NamingException: Cannot create resource instance报错修改
    百度AI人脸识别的学习总结
    ECharts3.0饼状图使用问题总结
    jni开发
    AndroidStudio封装jar并混淆
    Androidstudio代码混淆
  • 原文地址:https://www.cnblogs.com/yujiao-99/p/12912961.html
Copyright © 2020-2023  润新知