css定位

最新推荐文章于 2024-07-07 17:22:42 发布

无名氏*

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/qq_44848423/article/details/112339615

版权

下面介绍关于CSS中的几种定位：

1、static定位（静态定位）

所有标签的默认定位（即无定位），静态定位的元素位于页面的最底层，属于标准流。

2、relative定位（相对定位）

给标签添加代码

.class_name {
 position: relative;
}

那么该标签就是相对定位了，相对定位的标签可以通过设置top、bottom、left和right属性来调整其位置。
相对定位的标签的移动位置是相对于该元素在文档流中的原来的位置。看下面的例子：

 <style>

     .clearfix::after {
         content: '';
         clear: both;
         display: block;

     }

     .container-wrapper div {
         float: left;
         width: 100px;
         height: 100px;
         background-color: red;
         margin-right: 10px;
         color: black;
         text-align: center;
         line-height: 100px;
     }


 </style>

<div class="container-wrapper clearfix">
   <div class="container1">box1</div>
   <div class="container2">box2</div>
   <div class="container3">box3</div>
   <div class="container4">box4</div>
</div>

效果如下

下面给box2设置相对定位

在上面的代码基础上添加下面的代码

 .container-wrapper div:nth-child(2):hover {
     position: relative;
     left: 10px;
     top: 10px;
     background-color: chartreuse;
 }

在这里插入图片描述
这个时候box2就相对于自己之前在文档流中的位置进行定位。

注意：相对定位的元素会飘起来（位于文档流的上面一层），但是该元素不会脱离文档流，其他元素也不会占据决定定位元素原来的空间位置。这一点和下面介绍的绝对定位相反。

3、absolute定位（绝对定位）

给标签添加代码

.class_name {
 position: absolute;
}

    那么该标签就是绝对定位了，绝对定位的标签可以通过设置top、bottom、left和right属性来调整其位置。
    相对定位的标签的移动位置是对于其最接近的一个具有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。
    还是上面的例子，将代码进行修改:

 .container-wrapper div:nth-child(2):hover {
     position: absolute;
     left: 0px;
     top: 0px;
     background-color: chartreuse;
 }

在这里插入图片描述
由于其父级元素没有设置定位，所以他就相对于<body>元素进行定位，而且可以看到该元素已经脱离文档流了，其他元素会占据它的位置。
现在给它的父元素设置一个定位:

.container-wrapper {
            position: relative;
        }

在这里插入图片描述
我们发现他就相对于其父元素进行定位了。

4、fix定位（固定定位）

给标签添加代码

.class_name {
 position: fixed;
}

固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

无名氏*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫