css:绝对定位那些事--position:absolute

最新推荐文章于 2022-10-21 14:59:03 发布

ECHO-Debug

最新推荐文章于 2022-10-21 14:59:03 发布

阅读量454

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44455764/article/details/108991144

版权

本文详细介绍了CSS中的绝对定位`position:absolute`，通过实例解析其定位规则：默认值、参照物及层级控制。讲解了如何通过`left/top/right/bottom`调整元素位置，并利用`z-index`设置显示层级，以及解决元素顶部对齐问题和创建两栏布局的方法。

摘要由CSDN通过智能技术生成

position：absolute

想知道绝对定位怎么用，让我们先看看没有绝对定位的时候是什么样？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>position:absolute&&relative</title>
	<style type="text/css">
		.demo1{
    
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		.demo2{
    
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="demo1"></div>
	<div class="demo2"></div>
</body>
</html>

如下图这样是浏览器显示的效果：两个div，一上一下地紧紧挨着。

在这里插入图片描述

如果我们希望这两个div能站在一行里，我们可以修改div的display属性，让两个div可以在行内并排

.demo1{
   
			width: 100px;
			height: 100px;
			background-color: orange;
/*div的display为block（块级元素）, 手动修改为inline-block（行级块元素）*/
			display: inline-block;
		}
		.demo2{
   
			width: 200p