标签：定位 07 auto top 元素 文档 margin CSS
CSS 中的定位
HTML 页面的文档流
1、标准文档流
标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式
当前面内容发生了变化，后面的内容位置也会随着发生变化
2、留存弊端
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”
显然标准流已经无法满足需求，这就要用到浮动
以及某些元素会出现的特定区域，这就要用到定位
什么是定位？
浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子
定位的属性
定位 = 定位模式 + 边偏移量
定位模式：一个元素在文档中的定位方式
边偏移量：决定该元素的最终位置
1.是否占据原有空间(是否脱标) 2.以谁为参考系移动位置
定位模式 + 边偏移量
position:
static: 静态定位
fixed: 固定定位
sticky: 粘性定位
relative: 相对定位
absolute: 绝对定位
top:
bootom:
left:
right:
1、static: 静态定位 没有脱离标准文档流
一般的标签元素不加任何定位模式，都属于静态定位
2、fixed: 固定定位 ！！！ 不保留原本占据的空间，脱离标准文档流
相对于浏览器窗进行偏移并且不会随着滚动条进行滚动
用途：
1、网页右下角的 “返回顶部”
2、顶部导航条
3、sticky: 粘性定位 没有脱离标准文档流
粘性定位可以被认为是相对定位和固定定位的混合
以浏览器的可视窗口为参照系移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必需添加top、left、right、bottom中的一个才有效
用途：
当滚动条到达某一位置时，这个粘性定位的容器才不随滚动条移动而移动（吸顶效果）
4、relative: 相对定位 ！！！ 原本占据的空间依旧保留着，没有脱离标准文档流
相对于该元素本身在标准文档流时的位置进行偏移，元素仍然保持未定位前的形状
5、absolute: 绝对定位 ！！！ 不保留原本占据的空间，脱离标准文档流
相对于已经设置定位属性的父元素的位置进行偏移，如果都没有就针对<body></body>
通常情况下和相对定位一起使用 --- 子绝父相
用途：
鼠标移入时照片放大效果
二级菜单
轮播图上的翻页按钮
图片底部的标题
关闭按钮
定位元素之包含块-参考系问题
包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，
即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，浏览器是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，
如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置
透明属性
opacity : [0.0 - 1.0] 从0.0(完全透明)到1.0(完全不透明)
该属性我们可以设置图片、文字、盒子模型等等的透明度
IE9, Firefox, Chrome, Opera 和 Safari 都可以使用属性 opacity 来设置透明度
面试题：区别？
IE8 以及更早的版本使用滤镜 filter: alpha(opacity=x) x 能够取的值从 0 到 100
定位元素层级关系
z-index : auto | number
检索或设置对象的层叠顺序
auto：默认值
number：无单位的整数值，可为负数， 默认为 0
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
出现元素重叠时，要哪个元素在前，要哪个元素在后，通过z-index设置，值越大越靠前
除了默认的定位模式，其他定位模式下都能生效
定位的特殊用法
设置元素水平，垂直都居中
方案一 (已知子元素尺寸,未知父元素尺寸)
父元素: {
position: relative;
}
子元素: {
width: ___px;
height:___px;
position: absolute;
top: 50%;
left: 50%;
margin-top: - 子元素height/2 px
margin-left: - 子元素width/2 px
}
方案二(子元素父元素尺寸都未知)
父元素: {
position: relative;
}
子元素: {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
为什么在这里设置 margin: auto; 又能实现元素水平垂直都居中呢？
只有绝对定位的元素才可以，意思就是绝对定位之后如果设置了 margin: auto,
那么 margin-top 和 margin-right 不再为0,而是 auto，
同时需要设置 top,bottom,left,right为0 来找到父元素的位置，
然后 margin: auto 会找到父元素的位置分配好上下左右外边距，从而实现水平垂直居中！
总结
1、标准文档流
元素会默认自动从左往右，从上往下的流式排列方式
2、浮动
可以让多个块级元素一行显示或者左右对齐盒子浮动
3、定位
定位最大的特点就是有层叠的概念，
可以让多个盒子前后叠压来显示，但是每个盒子需要测量数值
标签：定位,
07,
auto,
top,
元素,
文档,
margin,
CSS
From： https://www.cnblogs.com/fszj/p/17392082.html