CSS定位

来源于视频教程：

https://www.bilibili.com/video/BV14J4114768?p=237

浮动和定位

• 浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用于横向排列盒子
• 定位可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位组成

定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
定位模式通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移，盒子移动到的最终位置。有top，bottom，left和right4格属性

边偏移属性	示例	描述
top	top:80px	顶端相对于父元素上边线偏移量
bottom	bottom:80px	底部相对于其父元素下边线的偏移量
left	left:80px;	左侧相对于父元素左边线的偏移量
right	right:80px	右边相对于父元素右边线的偏移量

静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思
选择器{ position: static; }

• 静态定位按照标准流特性摆放位置，它没有边移量
• 静态定位在布局时很少用到

相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置移动的。
选择器 { position: relative; }
相对定位的特点：

• 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）
• 典型的应用相对定位，用来给绝对定位当爹的

绝对定位absolute（重要）

绝对定位是相对于它祖先元素偏移的
选择器 { position:absolute; }
绝对定位的特点：

• 如果没有祖先元素或者祖先元素没有定位（relative、absolute、fixed），则以浏览器为准定位
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
• 绝对定位不再占有原来的位置，脱标
• 子绝父相
• 绝对定位（固定定位）会完全压住盒子
  浮动元素不同，只会压住它下面标准的盒子，但是不会压住下面标准盒子里面的文字(图片)

    
    
    


    

    
啦啦啦啦啦啦啦啦
    

image.png

这是因为浮动产生最初的目的是文字环绕效果的，让文字环绕图片的。让div浮动不是压住文字和图片，是为了让它们围绕着div。
但是绝对定位（固定定位）会压住下面标准所有的内容。
把上面样式改为：

div{
            position:fixed;
            width:150px;
            height:150px;
            background-color: red;
        }

结果p标签和img全部被压住在div下面

image.png

• 如果绝对定位元素既有一个left属性也有right属性，则默认会执行left属性，同理，有top和bottom属性，则执行top属性**
• 加了绝对定位的盒子可以直接设置高度和宽度**

固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
选择器 { position: fixed; }
固定定位的特点：

• 以浏览器的可视窗口为参照点移动元素
  跟父元素没有任何关系
  不随滚动条滚动
• 固定定位不再占有原先的位置，脱标
  固定定位也是脱标的，可以看作是一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置

小算法：

1. 让固定定位的盒子left:50%，走到浏览器可视区（也可以看作版心）的一半位置
2. 让固定定位的盒子margin-left:版心宽度的一般距离。多走版心宽度的一半位置
   就可以让固定定位的盒子贴着版心右侧对齐了

粘性定位sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的
选择器 { position: sticky; top: 10px; }
粘性定位的特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原先的位置（相对定位特点）
• 必须添加top、left、right、bottom其中一个才有效
  跟页面滚动搭配使用。兼容性较差，IE不支持

四种模式总结

定位模式	是否脱标	移动位置	是否常用
static	否	不能使用边偏移	很少
relative	否（占有位置）	相对于自身位置移动	常用
absolute	是（不占有位置）	带有定位的父级	常用
fixed	是（不占有位置）	浏览器可视区	常用
sticky	否（占有位置）	浏览器可视区	当前阶段少

定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
选择器 { z-index: 1; }

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto;水平居中，但是可以通过以下计算方式实现水平和垂直居中。

1. left:50%;让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:-100px;让盒子向左移动自身宽度的一半。

定位特殊特性

绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
3. 脱标的盒子不会触发外边距塌陷
   浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题