作者:快活林2007 | 来源:互联网 | 2023-02-12 20:16
absolute:绝对定位。越独立越强大,无依赖性。不受容器的限制。独立的absolute可以摆脱overflow的限制,无论是滚动还是隐藏。absolute与float不能一起
absolute:绝对定位。越独立越强大,无依赖性。不受容器的限制。
独立的absolute可以摆脱overflow的限制,无论是滚动还是隐藏。
absolute与float不能一起使用,如果absolute生效,则float是无效的。
绝对定位可以配合margin实现相对定位。
动画尽量作用在绝对定位元素上。
与fixed,relative一样,absolute设计的初衷确实是定位。
但与fixed,relative不同的是absolute包含更多特有且强大的特性。
使用absolute实现网页整体布局会有很多优点。
例如:兼容性好,自适应强,性能优异,扩展方便,可以实现诸多效果等等。
z-index无依赖
1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素;
2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index;
3.如果多个绝对定位交错,非常非常少见,z-index:1控制;
4.如果非弹窗类的绝对定位元素z-index>2,必定z-index冗余,请优化!
absolute与整体布局 1. body降级, 子元素升级 升级的子div(假设类名为page)满屏走起: .page { position: absolute; left: 0; top: 0; right: 0; bottom: 0 } 绝对定位受限于父级,因此,page要想愉快地拉伸,需要: html, body { height: 100%; } 2. 各模块-头尾、侧边栏(PC端)各居其位 header, footer { position: absolute; left: 0; right: 0; } header { height: 48px; top: 0; } footer { height: 52px; bottom: 0; } aside { width: 250px; position: absolute; left: 0; top: 0; bottom: 0 } 3. 内容区域想象成body . content { position: absolute; top: 48px; bottom: 52px; left: 250px(如果侧边栏有); overflow: auto; //这里的overflow: auto是为了让中间内容区超过宽度后可以滚动 } 此时的头部尾部以及侧边栏都是fixed效果,不跟随滚动。避免了移动端position: fixed实现的诸多问题。 4. 全屏覆盖与page平级 . overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); z-index: 9; }
absolute 的破环性:
absolute的包裹性: