元素隐藏总结

static静态定位：不脱标 ,占用文档流,不能使用偏移；

relative相对定位：不脱标 ,占用文档流 ,相当于自身进行移动；

absolute绝对定位：脱标，不再占用文档流，以带有定位的父级盒子为参照物；

fixed固定定位：脱标，不再占有原来的位置，以浏览器为参照物；

sticky粘性定位：不脱标，占用原来的位置，也是以浏览器为参照物体，但是必须给定某一偏移属性值才会生效

 

定位层叠次序：z-index 只有定位的盒子才有此属性 

 

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

1.行内元素添加绝对或固定定位，可以直接设置宽度和高度,别的定位不生效（只限绝对和固定定位）

2.块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小为内容的大小，而不是宽度占100%了

3.只要是脱标的盒子都不会出发外边距塌陷（float、绝对或者固定）

4.绝对/固定定位会完全压住盒子

但是浮动元素不同，浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片(因为浮动最初产生的目的就是做文字环绕效果的，文字会围绕浮动的元素)，而绝对/固定定位会完全的压住该盒子 内容/图片也会压住。

5.如果一个盒子定位时既有left又有right则默认会执行left值 上下则默认执行上

 

元素的显示与隐藏

本质：让一个元素在页面中隐藏或显示出来

1.display 显示隐藏，设置一个元素应该如何显示

display：none 隐藏元素后，隐藏的元素位置也没有了。

2.visibility 显示隐藏

visibility：inherit 继承上一个父对象的可见性| visible 对象可视 | hidden 对象隐藏，隐藏的元素会继续占有原理的位置 

3.overflow：溢出显示隐藏

overflow：visible|hidden|scroll|auto