CSS 深入理解absolute

最新推荐文章于 2024-06-28 22:16:43 发布

俊刚、

最新推荐文章于 2024-06-28 22:16:43 发布

阅读量3k

点赞数 1

分类专栏： 2020以前文章标签： css absolute

本文链接：https://blog.csdn.net/csdn9_14/article/details/52829212

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

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>