CSS 深入理解absolute
来源:互联网 发布:dll编程书籍 编辑:程序博客网 时间:2024/04/27 01:04
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;}<div class= " page " ></div><div class= " overlay "></div>
absolute 的破环性:
<span style="font-size:18px;"><span style="font-size:18px;"><!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>absolute的破坏性</title><style>.box { padding: 10px; background-color: #f0f0f0;}input { position: absolute; top: 234px;width: 160px; height: 32px;font-size: 100%;}</style></head><body><div class="box"><img id="image" src="1.jpg" width="256" height="191"></div><input id="button" type="button" value="图片absolute化"><script>var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");if (eleImg != null && eleBtn != null) {eleBtn.onclick = function() {if (this.absolute) {eleImg.style.position = "";this.value = "图片absolute化";this.absolute = false;} else {eleImg.style.position = "absolute";this.value = "图片去absolute";this.absolute = true;}};}</script></body></html></span></span>
absolute的包裹性:
<span style="font-size:18px;"><!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>absolute的包裹性</title><style>.box { padding: 10px; background-color: #f0f0f0;}input { position: absolute; top: 234px;width: 160px; height: 32px;font-size: 100%;}</style></head><body><div id="box" class="box"><img src="2.jpg" width="256" height="191"></div><input id="button" type="button" value="容器absolute化"><script>var eleBox = document.getElementById("box"), eleBtn = document.getElementById("button");if (eleBox != null && eleBtn != null) {eleBtn.onclick = function() {if (this.absolute) {eleBox.style.position = "";this.value = "容器absolute化";this.absolute = false;} else {eleBox.style.position = "absolute";this.value = "容器去absolute";this.absolute = true;}};}</script></body></html></span>
1 0
- CSS 深入理解absolute
- CSS深入理解之absolute
- 深入理解css之 —— absolute定位
- position之absolute定位深入理解
- 深入理解CSS
- CSS深入理解
- CSS transitions深入理解
- 张鑫旭慕课之——深入理解absolute(上)
- 关于css的absolute和relative的问题理解
- css postion 理解 absolute 和fixed的区别
- 用故事理解CSS中的relative、absolute和overflow:hidden
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- 深入理解CSS盒子模型
- css z-index深入理解
- 【深入理解CSS】BFC详解
- 最短路
- 【codevs 4906】删数问题
- 用Python 实现的九种排序算法
- Python 字典setdefault()
- HTML进度条动画
- CSS 深入理解absolute
- Java web 写一个注册登录界面,Sql 10
- 图的实现——正邻接表&逆邻接表
- 【手机游戏开发优化篇】资深游戏开发工程师详解手游[体积]及[运行内存]的优化篇!
- 开发数字货币
- Mac UltraEdit_16.10.0.19 激活
- LeetCode 46 Permutations
- php的语法高亮函数,highlight_string和highlight_file(别名是:show_resource),以及highlight在php.ini中的配置
- UVA 1306 The K-League (最大流)