当前位置：网站首页 > 创业 > 正文

CSS定位的使用详细教程及层块顺序实例

张子豪 2025-10-12 10:26 1

在设计HTML页面的时辰有时辰会用到相对定位和感觉定位来设计网页，使得移动某个元素或者重叠两个区块的结果而不粉碎其他的元素，在这里我就用现实的例子来申明相对定位和绝对定位。

东西/原料

CSS根本常识
HTML根本常识

方式/步调

1
为了申明问题，起首我们来做一个未处置的根基的网页来对比，新建一个红色的div和一段文字，具体代码如下：
<html>
<head>
<title>相对定位和绝对定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;

}
</style>
</head>
<body>
<div class="div1"></div>
<p>我爱HTML，我爱CSS</p>
</body>
</html>
可以看到，下图中一个红色布景的区块下面右一段文字。
2
我们可以利用相对定位来设置元素的位置，相对位置是以区块基准点为左上角来设置的，在这里就用现实的例子来申明，具体代码如下，
<html>
<head>
<title>相对定位和绝对定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:relative;
top:25px;
left:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我爱HTML，我爱CSS</p>
</body>
</html>
如下图，只有我们区块的位置改变了其他的都没有变，如许点窜不影响其他结构。
3
说了相对位置设置相对于区块的左上角极点改变了top和left还可以设置相对极点right和bottom的值，具体代码如下：
<html>
<head>
<title>相对定位和绝对定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:relative;
right:25px;
bottom:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我爱HTML，我爱CSS</p>
</body>
</html>
如下图，是不是可以看到相对于区块的基点的右边和下边的位置改变了，使得区块标的目的左和标的目的上移动了。
4
除了相对定位还有绝对定位，这里就利用绝对定位来设置相对于right和bottom来设置，绝对定位是相对于网页可视化为基准点来说的，具体代码如下：
<html>
<head>
<title>相对定位和绝对定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:absolute;
right:25px;
bottom:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我爱HTML，我爱CSS</p>
</body>
</html>
可以看到，执行的结果是图片在网页的最下角相对于右边和底部做了25像素的位移。
5
这里来说说绝对定位相对于
<html>
<head>
<title>相对定位和绝对定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:absolute;
top:25px;
left:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我爱HTML，我爱CSS</p>
</body>
</html>
相对于网页的定位，其他页面的结构不影响，而且不占用网页的区域。
6
最后我们来说说区块层的挨次，这里来说说若何设置重叠字来申明结果，具体代码如下：
<html>
<head>
<title>重叠字</title>
<style>
div{
font-size:50px;
font-family:arial black;
}
.div1{
color:red;
position:absolute;
top:20px;
left:20px;
z-index:3;
}
.div2
{
color:blue;
position:absolute;
top:23px;
left:23px;
z-index:2;
}
.div3{
color:#666666;
position:absolute;
top:26px;
left:26px;
z-index:1;
}
</style>
</head>
<body>
<div class="div1">我爱HTML，我爱</div>
<div class="div2">我爱HTML，我爱</div>
<div class="div3">我爱HTML，我爱</div>
</body>
</html>
可以看到层叠文字的结果，这里用到了Z-index来调节显示的层数。