CSS笔记-定位

定位是允许我们覆盖基本文档流来管理和微调页面的一个特殊位置。

定位的使用方式

1. 指定定位方式：使用 position属性指定一个元素的定位方式
2. 精确指定位置： 使用 top,right,bottom,left 属性指定该元素的最终位置

定位的方式

静态定位

• 静态定位是每个元素获取的默认值
• 将元素放入文档的标准布局流中的正常位置

.static-positioned  {
    position: static;
    top: 30px; // 属性不起效
}

相对定位

• 相对元素的默认位置按照坐标进行相对移动， 相对于自己原来的位置定位
• 应用场景： 在不影响别的元素情况下对元素进行微调

.relative-positioned {    
 	position: relative;
	left: 20px; // 向右移动20px
 }

绝对定位

• 脱离标准流，以坐标形式定位
• 以坐标的形式相对于它的容器定位
• 应用场景： 弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

.absolute-positioned {  
	position:absolute;    
	left:100px;    
}

固定定位

• 脱离标准流，以坐标形式定位
• 固定元素是相对于浏览器视口本身
• 应用场景：固定的有用的 UI 项目，如持久导航菜单

.fixed-positioned {
    position: fixed;
    top: 30px;
}

粘贴定位

• 被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点后变固定
• 应用场景： 索引头部黏贴变更

.sticky-positioned {
    position: fixed;
    top: 30px; 
}

包含块

一个元素的尺寸和位置经常受其包含块的影响。 大多数情况下，包含块就是这个元素最近的祖先 块元素的内容区。

确定包含块

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性。

• static、relative、sticky的情况：包含块为最近的祖先块元素的内容区边缘，也可能会建立格式化上下文
• absolute 的情况：包含块为最近的position不是static的祖先元素的那边距区的边缘
• fixed 的情况：连续媒体的情况下包含块是 viewport, 分页媒体为包含块是分页区域

绝对定位上下文解决方案：子绝父相

1. 在绝大多数情况下，子元素的绝对定位都是相对父元素进行定位的
2. 若希望子元素相对于父元素进行定位，又不希望父元素脱标 =》 常用解决方案是： 父元素设置position： relative

z-index

z-index属性可以改变堆叠顺序。 默认情况下， z-index 为 auto，实际上为 0。

z-index: 1;