CSS之position定位

最新推荐文章于 2025-08-01 23:32:40 发布

阿斯乐Code

最新推荐文章于 2025-08-01 23:32:40 发布

阅读量199

点赞数 2

CC 4.0 BY-SA版权

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

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

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中的position属性，包括静态定位、相对定位、绝对定位、固定定位和粘性定位，以及边偏移的概念。讨论了定位模式如何影响元素在文档中的位置，特别强调了相对定位、绝对定位和固定定位的区别。此外，还提到了子绝父相的定位技巧，定位的叠放顺序以及定位的特殊特性，如块元素和行内元素在定位后的宽高变化。最后，总结了浮动、定位和标准流的关系及其应用场景。

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

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

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

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">2</div>
	<div class="box3">3</div>

在这里插入图片描述
↑ 盒子box2是相对定位，给了偏移量，它仍然占有原来空间，下面的标准流box3不会受影响。

绝对定位absolute

（重要）元素移动位置是相对于最近一个嵌套它的祖先元素来，没有父级元素，或者父元素是浮动的或者没有给定位的（没position：xxx(除了static) ），则以浏览器四周为准。

偏移之后会脱标，比浮动还高，下面的标准流会被影响

固定定位fixed

(重要) 固定于浏览器的 可视窗口 ，可以在滚动浏览器页面时固定位置不变。

可以left:50%;margin-left: 版心宽度一半距离+ ，这样就能让盒子固定悬在版心右边显示；悬在左边也同理 right:50%和margin-right: 版心宽度一半距离+ ，

这样缩放浏览器页面时盒子会跟着版心又能在滚动界面时固定于可视窗口的固定位置

例：

	<style>
		.fixed{
            position: fixed;
            top: 50px;
            right: 50%;
            margin-right: 605px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .banner{
            width: 1200px;
            height: 600px;
            background-color: pink;
            margin: 50px auto;
        }
    </style>
	<div class="fixed">5</div>
    <div class="banner">6</div>

在这里插入图片描述

粘性定位sticky

它是相对定位和固定定位的混合，因为它既 占有原先位置 又 可以悬于可视窗口区域。

必须添加top、left、right、bottom的其中一个才有效

缺点：兼容性差 IE不支持,一般用js实现

例：

<style>
    	body{
            height: 5000px;
        }
        .sticky{
            position: sticky;
            top: 5px;
            width: 200px;
            height: 500px;
            background-color: darkblue;
            margin-top: 100px;
        }
    </style>
<body>
  <div class="sticky"></div>
</body>

在这里插入图片描述

边偏移

top ：xxpx | bottom： xxpx | left：xxpx | right： xxpx

如果同时有left和right，则left有效；如果同时又top和bottom，则bottom有效。

子绝父相

父元素 position: relative 子元素position: absolute

只要子元素用了绝对定位，它默认是相对于整个浏览器窗口的四周围来定义边偏移，只有父元素设置了相对定位，子元素设置的边偏移才会以父元素的四周为参考。

定位的叠放顺序

可以用z-index来决定，如果没给，多个有position的盒子，后面写的在最上面（后来居上），
定义了z-index数值越大的越靠上，默认auto，负数在下面，数值都不加单位，

只有定位盒子才能用z-index属性

定位的特殊特性

块元素添加了定位positon的绝对定位absolute 或 固定定位fixed 后不设置宽高的话，宽高是由内容撑开的（相对定位relative则不会，宽度占一行）

行内元素加了定位position的绝对定位absolute 或 固定定位fixed 后可以设置宽高。

例：

	<style>
		.test {
            position: absolute;
            background-color: pink;
        }
        span {
            position: absolute;
            top: 100px;
            background-color: skyblue;
            width: 100px;
            height: 100px;
        }
    </style>

    <div class="test">9</div>
    <span>10</span>

在这里插入图片描述

定位总结

定位模式	是否脱标	移动位置	是否常用
静态定位static	否	不能使用边偏移	否
相对定位relative	否	相对于自身原位置移动	是
绝对定位absolute	是	带有定位的父级或相对于浏览器	是
固定定位fixed	是	浏览器可视区	是
粘性定位sticky	否	浏览器可视区	否

浮动不会压住下面标准流的文字，但是绝对定位absolute 和固定定位fixed会。
因为浮动最开始是为了实现文字环绕效果而出现的，现在多用于布局。

浮动、定位、标准流的联系案例：

<style>
 		* {
            margin: 0;
            padding: 0;
        }
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            position: relative;
            width: 50px;
            height: 50px;
            top: 10px;
            left: 10px;
            background-color: skyblue;
        }
        .box3 {
            width: 500px;
            height: 500px;
            background-color: gray;
        }
</style>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>