css第六天----定位（相对定位、绝对定位、固定定位、粘性定位；绝对定位的盒子垂直水平居中对齐；元素的显示与隐藏）

一、定位

定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式；
边偏移则决定了该元素的最终位置。

边偏移属性：

• top：顶部偏移量，元素相对于父元素上边线的偏移量；
• bottom：底部偏移量， 元素相对于父元素下边线的偏移量；
• left：左边偏移量，元素相对于父元素左边的偏移量；
• right：右偏移量，元素相对于父元素右边的偏移量。

定位模式：

• position: static |relative |absolute|fixed;

1.static静态定位

加边偏移没有效果，元素默认定位方式。

2.relative 相对定位

选择器 { position:relative;}

• 相对自身原来的位置移动；
• 移动走后原来的位置保留；
• 只给盒子设置position: relative; 属性，盒子位置不会发生变化。得加边偏移。

注：同时给盒子设置左和右边偏移，则执行左边偏移。上下，则执行上。

3.absolute绝对定位

选择器 { position: absolute;}

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准；
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考移动点；
• 不再占有原来的位置。

4.fixed固定定位

选择器 { position: fixed;}

• 以浏览器的可视窗口为参照点移动 ，不随滚动条滚动；
• 不占有原来的位置。

固定在版心右侧边缘 1：先left:50%; 2：margin-left: 版心剩下的一半距离。

5.sticky 粘性定位

选择器 { position: sticky;}

• 以浏览器的可视窗口为参照点移动;
• 占有原来的位置；
• 必须添加top、left、right、bottom其中一个才有效。兼容性不好。

6.子绝父相

子级使用绝对定位，父级使用相对定位；

父级使用相对定位：

• 不脱标，在标准流中占据空间；
• 绝对定位的子元素都参考父元素进行定位。

子级使用绝对定位：

• 脱标，不影响其他元素的摆放;
• 自己则相对腹肌任意摆放。

7.z-index 定位叠放顺序

• 数值可以是正整数、负整数或0，默认auto，数值也大，越靠上;
• 若数值相同，按照书写顺序，后写的在上边;
• 数字后不能加单位;
• 只有定位的盒子才有z-index属性。

8.绝对定位的盒子居中

水平居中：
一步：给盒子left: 50%
二步：让盒子左移自身宽度的一半 margin-left: -自身宽度的一半;。负值自身宽度的一半。

垂直居中：
一步：给盒子top: 50%;
二步：让盒子上移自身高度的一半 margin-top: -自身高度的一半;。负值自身高度的一半。

9.定位特殊性

• 行内元素设置了绝对或者固定定位后，可以直接设置宽高
• 块级元素设置绝对或者固定 定位后，如果不给宽或高，默认是内容的大小。
• 脱标的盒子（浮动、绝对定位、固定定位）不会触发外边距合并；
• 绝对定位会压住文字，浮动则不会。

二、显示属性

1、display 显示隐藏

• display: none; 隐藏对象
• display: block; 显示元素。
• display隐藏元素后，不再 占有原来的位置。

2、 visibility 显示隐藏

• visibility: visible; 元素可见；
• visibility: hidden; 元素隐藏。
• visibility隐藏元素后，还会占有原来的位置。

3、overflow 溢出显示隐藏

overflow: visible | hidden | scroll |auto;

• visible: 不剪切内容也不添加滚动条
• hidden: 不显示超过对象尺寸的内容，超出的部分隐藏掉
• scroll: 不管超出内容否，总是显示滚动条
• auto :超出自动显示滚动条，不超出不显示滚动条

---

今天就到这里啦，感谢各位观看。

今天你认真写代码了吗？