css：四种定位（position)以及z-index层级

牛奶面包吖

已于 2023-04-10 13:55:31 修改

阅读量1.7k

点赞数 1

分类专栏： css 文章标签： css html web

于 2022-10-08 11:37:25 首次发布

本文链接：https://blog.csdn.net/qq_50487248/article/details/127186195

版权

当页面上发生了重叠时，使用定位。

1.固定定位：position：fiexd

相对于浏览器不占据原来的位置（脱离文档流）

<style>
        #d1{
     
            width: 200px;
            height: 200px;
            background-color: red;
             position: fixed;
            top: 300px;
            left: 300px;
        }
      
    </style>
<body>
      <div id="d1">我是第一个div</div>
</body>

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

2.相对定位：position: relative;

相对定位不会脱离文档流，相对于它自己本身的位置

 <style>
        #d1{
     
            width: 200px;
            height: 200px;
            background-color: red;
            position:relative;
            top: 300px;
            left: 300px;
        }
</style>
<body>
    <div id="d1">我是第一个div</div>
</body>