zoukankan      html  css  js  c++  java
  • 理解css中的position属性

    理解css中的position

    两种类型的定位

    • static类型:只有一个值position: static.position默认值
    • relative类型:包括三个值,这三个值会相互影响,允许你以特定方式移动元素
      • position: relative
      • position: absolute
      • position: fixed

    static类型定位

    • 是每个元素默认的position,让元素定位在正常的文档流中

    relative类型定位

    设置的relativeabsolutefixed值都叫做relative类型。设置这些定位值的元素可以相对与自身、父级元素或网页可视窗口而被移动

    • 所有的relative类型定位都可以进行以下事情:
      • 通过设置移动属性即:toprightbottomleft把自身移出正常文档流
      • 创建一个relative类型的布局,允许position为absolute的子元素相对于该元素被定位

    relative定位

    relative定位代码一般如下:

    .ourBox {
      position: relative;
    }
    
    • 可以被移除正常文档流,同时在文档流所占位置不变
    • 使用移动属性移动该元素是相对于自身来说的,如下例子:
    .ourBox {
      position: relative;
      top: 20px;
      left: 20px;
    }
    

    relative

    可以看出该元素向下移动20px,向右移动20px,这是相对于它一开始在文档流中正常的位置移动的。注意:这时该元素在文档流所占位置是不变的,也不会影响到它周围的元素。

    absolute定位

    absolute定位和relative相比有两个显著区别:

    • absolute定位的元素被移出正常文档流,且不会在文档流中占据空间
    • 该元素是相对于其最近父级元素定位的,且父级元素的定位是相对类型的

    一个例子:

    .ourBoxesParent {
      position: relative;
    }
    .ourBox {
      position: absolute;
      top: 0;
      left: 0;
    }
    

    absolute

    一开始三个色块(盒子)并排显示,当我们把深色盒子定位为absolute后,它被移出文档流,不占位置,现在剩余两个盒子并排显示了。

    再次强调:

    • absolute定位的元素被移出正常文档流,且不会在文档流中占据空间
    • 该元素是相对于其最近父级元素定位的,且父级元素的定位是相对类型的

    fixed定位

    fixed定位在absolute的基础上又有一个不同点

    • fixed定位的元素是相对于浏览器窗口定位的

    例子:

    .ourBox {
      position: fixed;  
      top: 0;
      left: 0;
    }
    

    fixed

    相对于浏览器窗口定位意味着即使滚动页面,该元素仍然处于一开始的位置

    原文链接:https://medium.com/@jacobgreenaway12/taming-the-css-beast-master-positioning-5882bad14458

    PS: css新增的sticky定位暂属实验阶段,本文不予讨论

  • 相关阅读:
    C#将List<T>转化为DataTable
    SqlServer常用内置函数
    C#索引器
    验证Textbox的字符长度
    WM消息对应的Message消息中的Lparam和WParam
    对窗体操作的WM消息
    DllImport使用
    C#获取当前路径的七种方法
    注册ActiveX控件
    [转]VS2010中水晶报表安装应用及实例
  • 原文地址:https://www.cnblogs.com/ahswch/p/9824095.html
Copyright © 2011-2022 走看看