CSS-定位3-相对定位

1、相对定位概述

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
(1)相对定位 元素不会脱离文档流
(2)相对定位 是相对元素,在正常文档流中的原始位置

2、效果演示

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-定位-相对定位</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrap{
            width : 800px;
            background: gray;
            margin: 0px auto;
        }
        .div1{
            border: 1px;
            background: blue;
            height: 100px;
        }
        .div2{
            width: 700px;
            background: red;
            height: 100px;
            position: relative;
            top : -20px;
        }
        .div3{
            background: green;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

效果如下,红色的内容是相对布局,因为浮动不会脱离文档流,仍然占据原来的位置,所以绿色的块不会向上移动。


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 800评论 0 0
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,866评论 0 6
  • 目录 内容 一. 我对标签、元素、盒子的理解 相信很多人和我之前一样,对于web的许多概念也都知道是什么意思,大家...
    科研者阅读 716评论 2 2
  • 踏上返程,离开家乡,在火车上渡过29个小时后,我要开始上班工作了。 回家过年,总有人问我过得好不好。为了不让家人担...
    张七造梦阅读 353评论 0 1