众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。

要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白

<body>

    <!-- 此时div占据的位置是他自身的高度加上top值为110px -->

    <div style="width:100px;height:100px;border:1px solid red;position:relative;top:10px">

    </div>

</body>

解决这个问题

/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/

div{

    margin-top:-10px;

}

例：

<body>

    <!-- 此时div占据的位置是他自身的高度加上bottom值为110px -->

    <div

        style=" width:100px;

                height:100px;

                border:1px solid red;

                position:relative;

                bottom:10px"

    >

    </div>

</body>

解决：

/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/

div{

    margin-bottom:-10px;

}

设置了相对定位relative之后，改变top值，如何去掉多余空白？的更多相关文章

  1. [Android] 对ImageView设置属性scaleType为FIT_START，如何去掉多余空白

    当对ImageView设置了属性scaleType为FIT_START时,可以通过调用ImageView的setAdjustViewBounds(true). 即: imageView.setScal ...

  2. 尽量使用translate而不是改变top/left进行动画（翻译）

    前言 本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left,本文有改动,添加了一些作者自己的理解,不当之 ...

  3. Top值

    业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...

  4. 再谈 apache设置virtualhost + apache的一些相关设值

    首先 要弄懂究竟什么是, vitrual host: 虚拟主机, 他有什么用处? 就是说: 一台计算机(server)中, 通常只是放一个网站/站点 但是 如果机器紧张, 服务器性能比较好,或访问的站 ...

  5. div+Css绝对定位(absolute)和相对定位(relative)的总结

    1.没有外Div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上 3.若父Div没有设置定位,子Di ...

  6. java 数据类型：集合接口Collection之List~ArrayList：remove移除；replaceAll改变原有值；sort排序；迭代器listIterator()；

    什么是List集合: 特点: 元素有序可重复的集合. 集合中每个元素都有其对应的顺序索引. List集合默认按元素的添加顺序设置元素的索引,索引从0开始.   List接口的常用方法: List可以使 ...

  7. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  8. c# 根据配置文件路径，设置和获取config文件 appSettings 节点值

    /// <summary> /// 获取编译后的主配置文件节点值 /// </summary> /// <param name="key">&l ...

  9. jquery设置div,文本框 表单的值示例

    我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...

随机推荐

  1. 微信小程序开发者工具构建npm提示没找到node_modules目录

    一.官网给的文档写的不够充分,需要你充分理解npm的使用方法,才能明白的: 二.第一步:先在你电脑上安装npm 参考下面文章 https://www.cnblogs.com/zmdComeOn/p/1 ...

  2. python anaconda 常用操作；conda 命令指南

    在使用 python anaconda时,经常会用到很多常用操作,记录下来,方便以后更好地使用: conda: Conda既是一个包管理器又是一个环境管理器.你肯定知道包管理器,它可以帮你发现和查看包 ...

  3. java8-02-再探Lambda表达式

    Lambda表达式   主要作用替代匿名内部类   达到简化代码的操作                                  Lambda表达式 在对象中的使用   Employee类

  4. Spring的增强模式

    一.前置增强 1.IdoSomeService 2.IdoSomeServiceImpl类实现IdoSomeService接口 3.MyBeforeAdvice 实现前置增强方法 4.applicat ...

  5. 【计算机网络】WebSocket实现原理分析

    1.介绍一下websocket和通信过程? 1.1 基本概念 [!NOTE] Websocket是应用层第七层上的一个应用层协议,它必须依赖 HTTP 协议进行一次握手 ,握手成功后,数据就直接从 T ...

  6. MySQL中的group_concat函数的使用

    本文通过实例介绍了MySQL中的group_concat函数的使用方法,比如select group_concat(name) . MySQL中group_concat函数 完整的语法如下: grou ...

  7. MySQL（10）---自定义函数

    MySQL(10)---自定义函数 之前讲过存储过程,存储过程和自定义函数还是非常相似的,其它的可以认为和存储过程是一样的,比如含义,优点都可以按存储过程的优点来理解. 存储过程相关博客: 1.MyS ...

  8. Zuul 1.x 的工作原理

    Zuul简介 Zuul在微服务架构中,可以作为提供动态路由,监控,弹性,安全等边缘服务的框架.在Netflix,被用作所有请求到达streaming application的前门.Zuul使用一系列不 ...

  9. centOS服务器安装mongodb

    1.为服务器添加mongodb的包管理工具,这就相当于在windows中安装npm,以便能用npm安装各种依赖.添加了这个包管理工具,才能在后面对mongodb做一系列操作. touch /etc/y ...

  10. 苹果 iOS13.2.2 正式版修复闷杀后台问题了？别担心，PerfDog 帮你来检测！

    导语 苹果于上周推送了iOS 13.2版本,带来了用户备受期待的图像处理系统深度融合(Deep Fusion),新增70多个表情.HomeKit安全视频.Siri隐私设置和支持AirPods Pro等 ...