原创 HTML5+CSS3 学习笔记 09

视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425

视频记录 221-233

CSS定位

 

为什么需要定位？

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

 

定位组成

• 定义：将盒子定在某个位置，因此定位也是在摆放盒子，按照定位的方式移动盒子。
• 定位 = 定位模式 + 边偏移
• 定位模式：指定元素在文档中的定位方式。
• 边偏移：决定该元素的最终位置。

 

定位模式

• 通过CSS的postion来设置
• static 静态定位， relative 相对定位， absolute 绝对定位， fixed 固定定位

 

边偏移

• 定位盒子最终位置：top bottom left right 4种属性
• 只有定位可以使用该属性，浮动、标准流无法使用。

 

静态定位（了解）

• 静态定位是元素的默认定位方式，无定位的意思。

• 静态定位按照标准流特性摆放位置，没有边偏移。

• 语法：选择器 { position: static;}

• 静态定位在布局时很少用到。

相对定位（重要）

• 元素移动位置时，是相对其原来的位置而言（自恋型）。

• 语法：选择器 { position: relative;}

• top: 100px; left: 100px; 后续移动位置只相对于当前位置而言，与父亲、浏览器无关。（移动位置时参照是自己原来的位置）

• 原来在标准流的位置继续占有，后面盒子仍以标准流的方式对待它。（不脱标，继续保留原来的位置。停职留薪）

绝对定位（重要）

• 绝对定位是元素在移动位置时，相对它祖先元素而言。（拼爹）

• 注意1：如果没有组件元素或者祖先元素没有定位，则以浏览器为准定位。（Document文档）

注意2：父元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。

注意3：绝对定位不再占有原先的位置。（脱标）

子绝父相

• 子级是绝对定位的话，父级要用相对定位。
• 子级绝对定位，不会占有位置，可以放在父盒子里任何一个地方，不会影响其他兄弟盒子。
• 父盒子需要加定位限制盒子在父盒子内显示。（绝对定位不占位置，因此父盒子必须是相对定位。）
• 总结：父级需要占有位置，是相对定位。子盒子不需要位置，是绝对定位。

 

固定定位（重要）

• 固定定位是元素固定于浏览器可视区的位置。
• 主要使用场景：在浏览器页面滚动时元素的位置不会改变。
• 重点记忆1：以浏览器的可视窗口为参照点移动元素。
• 重点记忆2：根父元素没有任何关系
• 重点记忆3：不随滚动条滚动
• 重点记忆4:固定定位不再占有原先位置
• 重点记忆5：固定定位也是脱标的，可以看作是一种特殊的绝对定位。
• 固定定位小技巧：固定在版心右侧位置
  • 第一步：固定盒子left 50%，走到可视区的一半位置。
  • 第二步：固定定位的盒子margin-left版心宽度的一半距离，多走版心宽度的一半位置。

 

粘性定位（了解）

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

 

定位的拓展

• 浮动元素：只会压住下面标准流的盒子，不会压住下面标准流盒子里面的文字（图片）。

• 绝对路径（固定定位）会压住下面标准流的所有内容。

• 浮动产生的最初目的是为了做文字环绕效果，文字会围绕浮动元素。