CSS之position定位

最新推荐文章于 2024-05-01 12:01:29 发布

VIP文章阿斯乐Code

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量128

点赞数 2

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_45707229/article/details/125595242

版权

将盒子定在某一位置，摆盒子，按照定位的方式移动盒子。

定位 = 定位模式(指定一个元素在文档中的定位方式) + 边偏移(决定该元素的最终位置)

position属性（定位模式）

静态定位static

（了解）默认定位方式无定位，没有边偏移

相对定位relative

（重要）以原位置的坐标为准根据 边偏移 的量移动，后面的其他盒子仍以标准流固定在那里不脱标
例：

	<style>
		.box1 {
     
            width: 200px;
            height: 200px;
            background-color: gray;
        }
        .box2 {
     
            position: relative;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: black;
        }
        .box3 {
     
            width: 200px;
            height: 200px;
            background-color: pink;
        }
	</style>
	<div class="box1">1</div>
	<div class="box2" style="color: #fff"