前端笔记——相对定位

最新推荐文章于 2024-10-11 16:25:59 发布

恬一

最新推荐文章于 2024-10-11 16:25:59 发布

阅读量1.1k

点赞数

分类专栏：李立超前端学习

本文链接：https://blog.csdn.net/weixin_44158539/article/details/107826436

版权

前端学习同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

李立超

32 篇文章 1 订阅

订阅专栏

定位(position)
-定位是一种更加高级的布局手段
-通过定位可以将元素摆放到页面的任意位置
-使用position属性来设置定位
可选值：
static(默认值，元素是静止的，没有开启定位)
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位
sticky：开启元素的粘滞定位
1.相对定位(relative)：
-当元素的position属性值设置为ralative时则开启了元素的相对定位
-相对定位是参照元素在文档流中的位置进行定位的
-相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化
2.相对定位是参照元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流，不会改变元素的性值，行内还是行内。块还是块
2.偏移量(offset)
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top
-定位元素和定位位置上边的距离
bottom
-定位元素和定位位置下边的距离
-定位元素垂直方向的位置由top和bottom两个属性来决定
通常情况下我们只会使用其中之一
-top值越大，定位元素越向下
-bottom值越大，定位元素越向上
left
-定位元素和定位位置的右侧的距离
-定位元素水平方向的位置由left和right两个属性决定
通常情况下只会使用一个
left越大，元素越向右，right越大，元素越向左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color:red;
        }
        .box2{
            width:200px;
            height:200px;
            background-color:green;
            position:relative;
           bottom:200px;
           left:200px;
        }
        .box3{
            width: 200px;
            height:200px;
            background-color:yellow;

        }
    </style>
</head>
<body>
    <div  class="box1">1</div>
    <div  class="box2">2</div>
    <div  class="box3">3</div>
</body>
</html>