position：relative

1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。<!DOCTYPE html><html lang="en">..

WDF.

50023人浏览 · 2019-07-30 09:53:06

WDF. · 2019-07-30 09:53:06 发布

1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于他原本的位置定位，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。若相对本身向上或向左的话要设置top，left为负值。

<!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>Document</title>
    <style>
        #div1 {
            width: 455px;
            height: 200px;
            background-color: rgb(187, 255, 0);
            position: relative;
            top: 40px;
            left: 60px;
        }
        
        #div2 {
            width: 455px;
            height: 200px;
            background-color: rgba(255, 59, 141, 0.685);
        }
    </style>
</head>
 
<body>
    <div id="div1">我是div1</div>
    <div id="div2">我是div2</div>
 
</body>
 
</html>
---------------------

在这里插入图片描述
作者：我本浪人–游吟世间
来源：CSDN
原文：https://blog.csdn.net/qq_41760521/article/details/91797236

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport