CSS-04（pink老师课程笔记）

定位

将盒子定在一固定位置

组成

定位模式+边偏移

定位模式

static-静态定位(标准流)（相当于无定位）

relative-相对

absolute-绝对（脱标）

fixed-固定（脱标）

相对定位

相对位置

position: relative;

​ top: 100px;

相对自己的位置移动，原位置保留

绝对定位

相对祖先的位置移动

没有父级或父级没有定位

以浏览器为准进行移动

父级有定位

在最近一位有定位的父亲**的范围内活动

不再占有原位置

子绝父相

固定定位

以可视窗口为参照点

与父元素无关

不占有原先位置

不随鼠标滚动而改变

与版心为参考点

position:fixed

left:50%

margin-left:版心宽度的一半

图片最好套一个盒子

粘性定位（sticky）

=相对+绝对

以可视窗口为参照点（固定)

占有原先的位置（相对）

必须加边偏移才有效

不常用，原因是兼容性差

边偏移

top/bottom/left/right: 80px

定位的叠放次序

使用z-index来控制盒子的前后叠放顺序

选择器{z-index： 1；}

数值越大，盒子越靠上（无单位）

如果数值相同，则后来者居上

绝对定位居中显示

不能使用margin: 0 auto；居中显示

水平居中

div {

​ position: absolute;

​ left: 50%;

​ margin-left: -100px;

​ width: 200px;

​ height: 200px;}

垂直居中

div {

​ position: absolute;

​ top: 50%;

​ margin-top: -100px;

​ width: 200px;

​ height: 200px;

​ }

两步走

盒子移动到父级元素的水平中心位置

盒子移动自身宽（高）度的一半

定位的特殊性

绝对和相对定位

行内元素设置后可直接设置宽度和高度

块级元素添加后，不给宽度或高度，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

绝对和固定

浮动不会压住下面标准流的文字（会压住一部分标准流的盒子）

绝对和固定会完全压住下面标准流的文字

这是浮动产生的目的是为了做文字浮动

如果一个盒子既有left属性和right属性，则执行left（先上后下，先左后右）

网页布局总结

垂直布局的块级盒子使用标准流布局。

多个块级盒子水平显示使用浮动

定位具有层叠性，元素在某个盒子自由移动

元素的显示与隐藏

display显示隐藏

设置元素如何显示

元素转换

display：block；

display：inline；

display：inline-block；

隐藏对象

display：none；

不再占有原位置

显示对象

display：block；

visiblity

inherit:继承父级属性

visible：显示

hidden：隐藏

继续占有原位置

overflow溢出显示隐藏

针对溢出部分

visible：显示（默认）

hidden：隐藏

auto：在需要时添加滚动条

scroll：滚动条

.box .mask {

​ display: none;

​ position: absolute;

​ top: 0;

​ left: 0;

​ width: 100%;

​ height: 100%;

​ background: rgba(0, 0, 0, .5) url(images/arr.png) no-repeat center;

​ }

​ .box:hover .mask {

​ /* 显示元素 */

​ display: block;

​ }