CSS（五）

（一）定位

1.为什么需要定位？

1）某个元素可以自由的在一个盒子内部移动位置，并且压住其他盒子
2）当滚动窗口的时候，盒子想要固定屏幕的某个位置

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

2.定位的组成

定位：将盒子固定到某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。由定位模式和边偏移来进行定位

定位模式：指定元素在文档中的定位方式
边偏移：决定了该元素的最终位置

1）定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

2）边偏移

边偏移就是定位的盒子移动到最终的位置，有top、bottom、left和right 4个属性

属性	示例	描述
top	top:80px	顶部偏移量，设置定位框的顶部外边距边缘。
bottom	bottom:80px	底部偏移量，设置定位框的底部外边距边缘。
left	left:80px	左部偏移量，设置定位框的左侧外边距边缘。
right	right:80px	右部偏移量，设置定位框的右侧外边距边缘。
clip		剪裁绝对定位的元素。
z-index		设置元素的堆叠顺序。

3.静态定位 static

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

选择器 { position : static }；

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

4.相对定位 relative

相对定位是元素在移动位置时，相对于它原来的位置来说的

特点：
1.它是相对于原来的位置来移动的移动位置的时候参考自己原来的位置）
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置，其他元素位置不会改变）

.d1 {
    width: 300px;
    height: 300px;
    background-color: pink;
    position: relative;
    top: 100px;
    left: 320px;
}

5绝对定位 absolute

绝对定位是元素在移动位置的时候，相对于它的祖先来说的

特点：
1.如果没有祖先元素或则是祖先元素没有定位，则以浏览器为准定位
2.如果父元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考移动位置。
3.绝对定位不再占有原先的位置（脱标）

6.子绝父相的由来

子绝父相：如果子级使用绝对定位，则父级使用相对定位
1）子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子
2）父盒子需要加定位限制子盒子在父盒子内显示
3）父盒子布局时，需要占有位置，因此父亲只能是相对定位

父级需要占有位置，因此是相对定位，子级不需要占有位置，因此是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

7.固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器上固定，不随页面滚动而改变位置

特点：
1.以浏览器的可视窗口为参照点移动元素，位置与父元素无关，不随滚动条的滚动而滚动
2.固定定位不占有原来的位置，固定定位也是脱标的，可以看作是一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置
1.让固定定位的盒子left：50%，走到浏览器可视区域的一半的位置
2.让固定定位的盒子margin-left:版心宽度一半的距离。多走版心宽度一半的位置

8.粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合

特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位是占有原先的位置的（相对定位的特点）
3.必须添加top、left、right、bottom其中一个才有效

9.定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后顺序（Z轴）

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。

PS：
1.数值可以是正数、负数、0，默认是auto，数值越大，盒子越往上
2.如果属性值相同，则按照书写的顺序，后来者居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性

10.定位的扩展

1）绝对定位盒子居中

加了绝对定位的盒子不能通过margin:0 auto;来进行水平居中，但是可以通过以下计算方法是现实水平和垂直居中

/* 水平居中 */
/* left走50% ————父元素宽度的一半 */
left: 50%;
/* margin-left 负值 往左走走子元素的一半 */
margin-left: -250px;

/* 垂直居中 */
/* /* top走50% ————父元素宽度的一半 */
top: 50%;
/* margin-top 负值 往左走走子元素的一半 */
margin-top: -150px;

2）定位特性

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容大小

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

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

4）绝对定位（固定定位）会完全压住盒子

1.浮动元素只会压住下面标准流盒子，但是不会压住下面标准流盒子的文字（图片）。浮动之所以不会压住文字，是因为浮动产生的最初目的是做文字环绕效果，文字会环绕浮动元素。
2.但是绝对定位（固定定位）会完全压住盒子包括文字（图片）

（二）网页布局总结

1.标准流

可以让盒子上下排列或者左右排列，垂直块级盒子显示就用标准流

2.浮动

可以让多个块级盒子在一行上显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后层叠来显示，如果元素在某个各自内移动就用定位布局

（三）元素的显示与隐藏

1.display属性

display属性用于设置一个元素如何显示

值	描述
none	此元素不会被显示。隐藏元素。
block	此元素将显示为块级元素，此元素前后会带有换行符。显示元素。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

PS：display隐藏元素后，不在占有原来的位置

2.visibility

visibility 属性规定元素是否可见。

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。

PS：visibility 隐藏元素后，也会占据页面上的空间。

3.overflow

overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

.d1 {
    /* 隐藏溢出元素 */
    /* overflow: hidden; */
    /* 不论是否溢出，都添加显示滚动条*/
    /* overflow: scroll; */
    /* 溢出时为元素显示滚动条 */
    overflow: auto;
    width: 200px;
    height: 200px;
    background-color: #f00;
    margin: 100px auto;
}