zoukankan      html  css  js  c++  java
  • 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的完美结合,特造出吸附效果
      特点:
      • 如果产生偏移,原位置还是会在常规流中
      • 如果它的最近祖先元素有滚动,那么它的偏移标尺就是最近祖先元素
      • 如果最近祖先元素没有滚动,那么它的偏移标尺是视口
      • 上下左右的偏移规则
  • 相关阅读:
    WebService帮助类改良版,支持多webservice
    .NET-list扩展方法Distinct去重
    C#创建泛型类T的实例的三种方法
    划水网站
    DataGridView增加右键取消操作
    Sql Server 快捷键
    SQL Server中使用convert进行日期转换
    ToolStrip 选中某一项打勾
    H5实现手写功能
    git使用
  • 原文地址:https://www.cnblogs.com/yujiao-99/p/12912961.html
Copyright © 2011-2022 走看看