前端应用_css_定位属性position 三种经典用法详细讲解

最新推荐文章于 2023-07-11 20:39:34 发布

上海_彭彭

最新推荐文章于 2023-07-11 20:39:34 发布

阅读量466

点赞数 2

分类专栏： css 文章标签： CSS poSition

本文链接：https://blog.csdn.net/qq_34979346/article/details/97621319

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css的属性 position 来设置元素的定位类型，为什么要有这个呢，设计思路是让盒子欲所欲为，我想放到哪就放到哪，有种天马行空的感觉。突破了前面讲的文档流。

position的设置项如下：

- relative 生成相对定位元素

元素所占的文档流的位置不变，元素本身相对于文档流的位置进行偏离。
我先创建个文档流，然后再用这个特性

在这里插入图片描述
如果我想把 1 盒子移动，怎么处理呢，我们就针对 box1 进行设置样式如下：

       body .box1{
        position: relative;
        left:50px;
        top:50px;
        background-color:gold;
        }

具体的代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin塌陷</title>
    <style type="text/css">
        .box{
        width:500px;
        border:1px solid #000;
        margin:50px auto;
        }
        .box div{
          width:100px;
        height:100px;
        background-color:green;
        margin:20px;
        text-align:center;
        font-size:40px;
        line-height:100px;
        }
       body .box1{
        position: relative;
        left:50px;
        top:50px;
        background-color:gold;
        }

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

</div>
</body>
</html>

效果如下：
在这里插入图片描述

总结：

偏移是针对元素本身偏移的量
原先的位置继续占用，也可以理解保持之前的文档流，上边的例子如果不占用 2 和3 就立刻进行上移。
偏移之后就浮动在页面上，漂浮在其他盒子上边，是不占用位置的，只是悬浮。

absolute 绝对定位

元素脱离文档流，也就是不占用原先的位置，可以理解为漂浮在文档流的上方，定位的标准为：
相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

把上边的定位方式改成绝对定位：

  body .box1{
        position: absolute;
        left:50px;
        top:50px;
        background-color:gold;
        }

效果图：
在这里插入图片描述
是不是很奇怪呢？

原因是它找不到父级有定位属性，所以它就直接找到body 来进行偏离。

下边我设置父级定位方式，看看是如何偏离的

 .box{
         position: relative;
        width:500px;
        border:1px solid #000;
        margin:50px auto;
        }

效果如下：

在这里插入图片描述
总结：

位移的对象选择，要注意了，参考我上边写的，
对象找到了，就按照位移的像素进行偏移。
2 和 3 盒子已经移动上边去了，说明位置已经腾出来了，自己不占用位置进行浮动。
偏移的像素可以为负数，和正数相反的方向
在计算偏移的时候要注意 margin 的值要算上
比如：盒子和偏移后的具体等于 margin的值加上偏移的值
一般设置父级为相对偏移类型，不设置偏移量，只是作为子级偏移对象

fixed 固定定位

脱离文档流，不占用位置，也是漂浮在文档流的上方，
它的参照偏移对象是浏览器窗口。
改写下：

 body .box1{
        position: fixed;
        left:0px;
        top:0px;
        background-color:gold;
        }

效果如下：
在这里插入图片描述
总结：
margin的值偏移后还是存在，这个要注意
不占用文档流
偏移对象是浏览器窗口
如果定位到左上角就是用， left：0px ； top：0px，左下角就是 left：0px； bottom：0px

总结

定位元素的特性为：
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。

创建一个块元素：

  .box4{
      background-color:pink;
      }
 <div class="box4">块元素</div>

效果如下：
在这里插入图片描述
我加上绝对定位 position：absolute 就变成一个行内元素

在这里插入图片描述
行内元素自己尝试下，并不难。

上海_彭彭

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端应用_css_定位属性position 三种经典用法详细讲解

css的属性 position 来设置元素的定位类型，为什么要有这个呢，设计思路是让盒子欲所欲为，我想放到哪就放到哪，有种天马行空的感觉。突破了前面讲的文档流。position的设置项如下：- relative 生成相对定位元素元素所占的文档流的位置不变，元素本身相对于文档流的位置进行偏离。我先创建个文档流，然后再用这个特性如果我想把 1 盒子移动，怎么处理呢， ...
复制链接

扫一扫