前端入门笔记之css（6）

绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

绝对定位的语法：{position: absolute}
1.脱离标准流：绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。
2.原来的位置不会保留
3.绝对定位是根据有定位的父级元素进行定位
4.如果父级元素没有定位，那么向外找到最外层有定位的元素，直到html标签（网页框来定位）

代码演示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>绝对定位</title>
<style type="text/css">
	*{margin: 0;padding: 0;}
	.myDiv1{
	position: absolute;width: 200px;height: 200px;background: pink;
	left: 100px;float:left;
	}

	.myDiv2{
		float:left67;width: 200px;height: 200px;background: yellowgreen;
	}
	
	.myDiv3{
	position: absolute;width: 20px;height: 20px;background: black;
	left: 10px;top: 20px;float:left;}
	
</style>
</head>
<body>
<div class ="myDiv1">
	<div class="myDiv3"></div><!-- myDiv1是myDiv3的父级元素 -->
</div>
<div class ="myDiv2"></div>
</body>
</html>

代码结果：

posted on 2021-10-29 16:37  一只花小友  阅读(46)  评论(0)    收藏  举报

导航