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