CSS定位

2019-11-14 16:02:29来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS定位

定位

  1. 将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子

    • 定位=定位模式+边偏移
    • 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
  2. 定位模式

    • 定位模式决定了元素的定位方式,它通过css的position属性来设置,其值可以分为四个:

      • 语义
        static 静态定位
        relative 相对定位
        absolute 绝对定位
        fixed 固定定位
  3. 边偏移

    • 边偏移就是定位的盒子移动到最终位置。有top、bottom/left、right四个属性

      • 边偏移属性 示例 描述
        top top:80px; 顶端偏移量,定义元素相对于其父元素上边线的距离
        bottom bottom:80px; 底部偏移量,定义元素相对于其父元素下边线的距离
        left left:80px; 左侧偏移量,定义元素相对于其父元素左边线的距离
        right right:80px 右侧偏移量,定义元素相对于其父元素右边线的距离
    • 静态定位static

      • 元素默认的定位方式,无定位的意思

      • 选择器{
        position:static;
        }
      • 静态定位按照标准流特性摆放位置,他没有边偏移

      • 静态定位在布局中很少使用

    • 相对定位reative

      • 元素在移动位置的时候,是相对于它原来的位置来说的

      • 选择器{
        position:relative;
        }
      • 特点:

        • 他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
        • 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待他。(不脱标,继续保留原来的位置)
    • 绝对定位absolute

      • 相对于他的父元素来说

      • 选择器{
        position:absoulute;
        }
      • 如果没有父元素或者父元素没有定位,则以浏览器为准定位(Document)

      • 如果祖先元素有定位(相对、绝对,固定定位),则以最近一级的有定位父元素为参考点移动位置

    • 子绝父相

      • 子级是绝对定位的话,父级要用相对定位
        • 子级相对定位,不会占有位置,可以放到父盒子里面的任何一个地方
        • 父盒子需要加定位限制盒子在父盒子内显示
        • 父盒子布局时,需要占有位置,因此父亲只能是相对定位
    • 固定定位fixed

      • 元素固定在网页的一个位置

      • 选择器{
        position:fixed;
        }
      • 特点:

        • 以浏览器的可是窗口为参照点移动元素
        • 跟父元素没有关系
        • 不跟随滚动条滚动
        • 不占有原先的位置
          • 固定定位也是脱标的,其实固定定位也可以看作是一种特殊的绝对定位
      • 固定定位小技巧:固定在版心的右侧位置

        • 小算法:
          • 让固定定位的盒子left:100%,走到浏览器可视区域一半的位置
          • 让固定定位的盒子margin-left;版心宽度的一般。就可以固定定位的盒子贴着版心右侧对其了
    • 粘性定位sticky

      • 粘性定位可以被认为是相对定位和固定定位的混合

      • 选择器{
        position:sticky;
        top:10px;
        }
      • 特点

        • 以浏览器的可是窗口为参照点移动元素(固定定位的特点)
        • 粘性定位占有原先的位置(相对定位的特点)
        • 必须添加top、bottom、right、left其中的一个才有效

原文链接:https://www.cnblogs.com/SSPOFA/p/11863016.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇: 前端之css(二)

下一篇:如何在HTML中设置字体颜色,你知道这几种方式吗?