• CSS定位


    position: 

    1. 模块: 提供与元素定位和层叠相关功能,它是核心模块

    2. 属性 .box{ position: relative; }

    名称 定位模型 定位 作用 特点  
    static 自然模型 静态定位/自然定位/常规定位 使元素处于常规流中(块、行垂直排列下去。行内水平从左到右)

    1.忽略top、left、bottom、right或z-index声明

    2.两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的

    3.具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中。

     
    relative 相对定位模型 相对定位

    使元素成为containing-block,

    官话是可定位的祖先元素

    1.可以使用top、bottom、left、right、z-index进行相对定位(相对的是:原来它在常规流中的位置)

    2.相对定位的元素不会离开常规流(还有它的一亩三分地)

    3.任何元素都可以设置为relative,它的绝对定位的后代可以相对于它进行绝对定位

    4.可以使浮动元素发生偏移,并控制它们的堆叠顺序。

     
    absolute 绝对定位模型 绝对定位 使元素脱离常规流

    1.脱离常规流

    2.设置尺寸要注意:百分比使谁?最近定位祖先元素

    3.如果没有最近定位祖先元素,会认body做爹爹

    4.left、right、top、bottom如果设置为auto,它将被打回原形

    5.letb如果设置为0,它将对齐到最近定位祖先元素的各边

    6.z-index可以控制堆叠顺序,999999

     
    fixed 固定定位模型 固定定位 使元素脱离常规流

    1.跟absolute的区别:相对于谁做绝对定位

    fixed:相对于视口,absolute:相对于最近定位祖先元素

    2.固定定位元素不会随着视口滚动而滚动

    3.继承absolute特点

     
    sticky 磁贴定位模型 磁贴定位/粘性定位/吸附定位 relative和fixed的完美结合,制造出吸附效果(赛场新秀,实力布局糖)

    1.如果产生偏移,原位置还是会在常规流中,一亩三分地留着

    2.如果它的最近祖先元素有滚动,那么它的偏移标尺就是最近祖先元素

    3.如果最近祖先元素没有滚动,那么它的偏移标尺是视口

    4.上下左右的偏移规则

     
               

    绝对定位居中妙计:

    div{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto auto;                
    }

    定位+边距居中妙计

    .container{
       100px;
      height: 100px;    
    }
    div{
         20px;
        height: 20px;  
        position: fixed;
        left: 50px;
        top: 50px;
        margin-top: 10px;
        margin-left: 10px;    
    }
    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    【非技术】谈谈业务6W+H
    WinForm二三事(三)Control.Invoke&Control.BeginInvoke
    企业应用架构模式读书笔记(一)
    WinForm二三事(四)界面布局(上)
    WinForm二三事(二)异步操作
    WinForm二三事(一)消息循环
    白话基础之虚拟存储器
    不清楚自己的位置,会走很多弯路
    WinForm二三事(一)补遗
    技术、业务、市场
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/10100813.html
Copyright © 2020-2023  润新知