CSS中你可能用到的几种定位方式_css 用文本定位-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67316947/article/details/123438078

本文介绍了CSS中的四种定位方式：static、relative、absolute和fixed，详细解析了每种定位的工作原理及如何使用top、bottom、left、right属性进行定位。同时提到了z-index在定位中的作用以及层叠分级的概念。

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

定位(position)

什么是定位？

百度百科上的说法对定位的解释是：在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。通俗的说，定位就是确定位置。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。使用css我们可以对HTML页面内容进行定位。

position 属性规定应用于元素的定位方法的类型

position 属性的五个值：

static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static定位

默认值，即没有定位，支持正常的文档流对象

<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style>
div.static {
    position: static;
    border: 3px solid #999999;
}
</style>
</head>
<body>

<h2>position: static;</h2>


<div class="static">
该元素使用了 position: static,无特殊定位
</div>

</body>
</html>

运行结果如下：

relative 定位

即相对定位，不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右）定位，并且可以通过z-index进行层次分级。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>定位</title> 
<style>
h2.pos_left
{
	position:relative;
	left:-20px;
}

h2.pos_right
{
	position:relative;
	left:20px;
}
</style>
</head>

<body>
<h2>正常位置的标题</h2>
<h2 class="pos_left">相对于其正常位置向左移动</h2>
<h2 class="pos_right">相对于其正常位置向右移动</h2>
</body>

</html>

运行结果如下：

absolute定位

脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>定位</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:100px;
}
</style>
</head>

<body>
<h2>内容</h2>
<p>使用绝对定位，元素可以随意放置，配合left和top使用更佳。</p>
</body>

</html>

运行结果如下：

fixed 固定定位

这里所固定的对像是浏览器可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>定位</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>

	<h2>悯农</h2>
	锄禾日当午，<br>
	汗滴禾下土。<br>
	谁知盘中餐，<br>
	粒粒皆辛苦。<br>
	<h2>为陈同甫赋壮词以寄之</h2>
	 醉里挑灯看剑，<br>
	梦回吹角连营。<br>
	八百里分麾下炙，<br>
	五十弦翻塞外声，<br>
	沙场秋点兵。<br>

    马作的卢飞快，<br>
	弓如霹雳弦惊。<br>
	了却君王天下事，<br>
	赢得生前身后名。<br>
	可怜白发生！ <br>
	<h2>悯农</h2>
	锄禾日当午，<br>
	汗滴禾下土。<br>
	谁知盘中餐，<br>
	粒粒皆辛苦。<br>
	<h2>为陈同甫赋壮词以寄之</h2>
	 醉里挑灯看剑，<br>
	梦回吹角连营。<br>
	八百里分麾下炙，<br>
	五十弦翻塞外声，<br>
	沙场秋点兵。<br>

    马作的卢飞快，<br>
	弓如霹雳弦惊。<br>
	了却君王天下事，<br>
	赢得生前身后名。<br>
	可怜白发生！ <br>
	

</body>
</html>

运行结果如下：