css---绝对定位

最新推荐文章于 2024-10-20 22:26:04 发布

阿陈陈陈

最新推荐文章于 2024-10-20 22:26:04 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： css 笔记文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46218101/article/details/120569184

笔记同时被 2 个专栏收录

60 篇文章

订阅专栏

css

12 篇文章

订阅专栏

本文详细介绍了CSS中的绝对定位，包括其脱离标准流、不保留原来位置、基于定位父级元素进行定位等特性，并通过代码示例展示了如何使用绝对定位创建页面布局。读者将理解如何利用绝对定位实现元素的精确定位以及与其他元素的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端入门笔记之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>