css笔记6

定位

1.为什么需要定位

定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住某个盒子。

2.定位组成

定位=定位模式+边偏移

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

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

3.静态定位

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

按照标准流的方式摆放位置

4.相对定位

1. 元素移动时是相对元素原来的位置来说的

2. 元素在标准流的位置中依然占用，后面的盒子仍以原来的方式对待它，不脱标

   position: relative;

   （会显示在浮动和标准流上面）

5.绝对定位

​ position: absolute;

1. 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
2. 如果没有父元素或者父元素没有定位，以浏览器为准进行对齐
3. 如果父元素有定位，以最近一级有定位的父元素为基准
4. 绝对定位不占有原先位置，脱标

6.子绝父相

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

7.固定定位

元素固定于浏览器可视区的位置。

position: fixed;

1. 以浏览器的可视窗口为参照点移动元素

   与父元素无关

   不随着滚动条滚动而滚动

2. 固定定位不占用原来的位置

小技巧：固定在版心右侧位置

算法：

1.left 50%

          2.  margin-left:版心宽度的一半

8.粘性定位

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

position:sticky; top:10px;

特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

9.定位叠放次序

使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

z-index:1;

数值越大，盒子越靠上

如果属性值相同，按照书写顺序，后来居上

==z-index只能用于相对定位，绝对定位和固定定位的元素==

10.定位的拓展

1.==加了绝对定位或固定定位的盒子不能通过margin:auto水平居中==

2.绝对定位和固定定位也与浮动类似。

1. 行内元素添加绝对定位和固定定位，可以直接添加高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽高，默认为内容的大小
3. 脱标的盒子不会有外边距合并

3.绝对定位和固定定位会完全压住下面的盒子

（浮动的元素不会压住下面标准流的文字，因为浮动最初的目的是产生文字环绕）

如果一个盒子既有left 和right ,默认执行left;既有top bottom,默认执行top

元素的显示与隐藏

display属性

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

visibility 可见性

visibility 隐藏元素后，继续占用原来的位置

visibility：visible ; 　元素可视

visibility：hidden; 　 元素隐藏

overflow

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么

属性值	含义
visible	默认，不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	溢出部分显示滚动条，无论需不需要都添加
auto	溢出部分显示滚动条，在需要的时候添加