CSS之定位-相对定位

最新推荐文章于 2024-07-06 20:55:00 发布

极客研究者

最新推荐文章于 2024-07-06 20:55:00 发布

阅读量1.2k

点赞数 1

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105573314

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

定位：定位是一种更高级的布局手段
通过定位可以将元素摆放到任意位置
使用position属性设置定位

可选值:
static:默认值(未开启定位)
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位
sticky:开启元素的粘滞定位

相对定位:当元素的属性position设置为relative时,则元素开启了相对定位(相对于原先位置)
相对定位的特点:
1.元素开启相对定位后,如果不设置偏移量元素不会发生任何变化
2.相对定位是参照元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流(如果是块元素的话,原来的位置还保留)
5.相对定位不会改变元素的性质,块还是块,行内还是行内

偏移量(offset):
当元素开启相对定位后,可以通过设置偏移量移动元素的位置

top:
定位元素和定位位置上边的距离
bottom:
定位元素和定位位置下边的距离

垂直方向的定位位置由top和bottom设置
通常情况下,只会选其中一个
top值越大,定位元素越往下移动
bottom值越大,定位元素越往上移动

left:
定位元素和定位位置左边的距离
right:
定位元素和定位位置左边的距离

水平方向的定位位置由left和right设置
通常情况下,只会选其中一个
left值越大,定位元素越往右移动
right值越大,定位元素越往左移动
Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位</title>
    <style>
    .box1{
        width:200px;
        height:200px;
        background-color:seagreen;
        
    }

    .box2{
        width:200px;
        height:200px;
        background-color:darkorange;
        /* 开启定位 */
        position: relative;
        /* 设置偏移量 */
        left:100px;
        /* bottom:200px;*/
        top:-200px;

    }

    .box3{
        width:200px;
        height:200px;
        background-color: brown;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

极客研究者

关注

1
点赞
踩
2

收藏

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

定位：定位是一种更高级的布局手段通过定位可以将元素摆放到任意位置使用position属性设置定位可选值:static:默认值(未开启定位)relative:开启元素的相对定位absolute:开启元素的绝对定位fixed:开启元素的固定定位sticky:开启元素的粘滞定位相对定位:当元素的属性position设置为relative时,则元素开启了相对定位(相对于原先位置)相对定...
复制链接

扫一扫

专栏目录