CSS 深入理解absolute
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>
CSS 深入理解absolute相关推荐
- CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧 ...
- 学习笔记之CSS深入理解(慕课网 张鑫旭主讲)
一.CSS深入理解之border 1. border-width不支持百分比 受语义和使用场景决定的,不会因为设备大而边框变大的 2. border-style属性 border-style:dott ...
- [css] 你所理解的css高级技巧有哪些?
[css] 你所理解的css高级技巧有哪些? 各种动画效果,能用css的都可以不去用js写的,对我来说就很高级 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
- CSS:理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
- html css 深入理解float
html css 深入理解float 首先,我们来看一段权威的关于float的解释: "浮动会让元素脱离文档流,不再影响不浮动的元素.实际上,并不完全如此.如果浮动的元素后面有一个文档流中的 ...
- CSS深入理解之line-height
以下文字整理自慕课网--张鑫旭的<CSS深入理解之line-height>. 一.line-height的定义 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这 ...
- css水平居中:使用absolute+transform
<!-- 1.父元素为相对布局,子元素为绝对布局 2.子元素设置left为50%;之后在向左移动自身的负50% --> <!-- 优点:居中元素不会对其他的产生影响, ...
- html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- CSS关于绝对定位absolute的理解
1.absolute 元素将会脱离正常的文档流,所以 其周围的元素将会忽略它的存在.如同 absolute 元素的 display 属性被设为了 none 一样.此时,我们可以使用 top,botto ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
最新文章
- Python- 反射 及部份内置属性方法
- Java并发编程实战~Condition
- body下的DIV 高度自适应
- Java机器学习开发库
- Misra-C编码规范全解读 - Misra C 概述
- 微信H5适配 解决微信调整字体大小导致Html5页面混乱
- react router 路由守卫_react实现路由守卫
- Red Giant VFX Suite for mac(电影级视觉特效插件)
- 点阵字库(字模)生成器 4.0 TS4
- 机器学习中类别变量的编码方法总结
- Linux:NFS服务器
- 调用spenssl库时可以查询到openssl版本但是编译报错
- 后台cs代码控制html控件,在asp.net中*.aspx.cs肿么用后台代码编写前台的事件?
- WT588D使用记录
- 一个最骚的面包屑导航
- 动力电池:车企们的新角斗场
- 小白系列(1) | 计算机视觉之图像分类
- android平板软件生态,「软件生态」对平板来说到底意味着什么?
- 多线程之死锁介绍及预防
- Android 基于agora 视频会议开发