相对定位relative

最新推荐文章于 2022-04-08 20:24:47 发布

zb0002011

最新推荐文章于 2022-04-08 20:24:47 发布

阅读量387

点赞数

分类专栏：前端 # CSS 文章标签： CSS

本文链接：https://blog.csdn.net/zb0002011/article/details/102767978

版权

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

相对定位：relative

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置(top/bottom,right/left)，让这个元素“相对于”它的起点进行移动。

CSS ç¸å¯¹å®ä½å®ä¾

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

实例1：可以看到div2被div3遮挡住了。因为div2元素仍然占据原来的空间，因此div3也是以div2原来的位置进行定位的，而不是div2移动后的位置。

<html>
<head>
<style type="text/css">
div 
{
	width:100%;
    height:100px;
	background-color:yellow;
    text-align:center;
    padding-top:0px;
    padding-bottom:0px;
    margin:10px;

}
div.pos_left
{
    position:relative;
    top:50px;
    outline:2px solid blue;
}
div.pos_right
{
    position:relative;
    outline: 3px solid red;
}
</style>
</head>

<body>
    <div>div1这是位于正常位置的标题</div>
    <div class="pos_left">div2这个标题相对于其正常位置向左移动</div>
    <div class="pos_right">div3这个标题相对于其正常位置向右移动</div>
</body>
</html>

这时候如果想换成div2覆盖div3，只需要通过z-index来控制，比如设置

div.pos_right
{
    position:relative;
    outline: 3px solid red;
    z-index:-1;
}

zb0002011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对定位relative

相对定位：relative 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置(top/bottom,right/left)，让这个元素“相对于”它的起点进行移动。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素...
复制链接

扫一扫