众所周知,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. Linux—文件管理

    文件操作 创建文件 [root@localhost ~]# touch a.txt # 创建单个文件 [root@localhost ~]# touch b.txt c.txt # 创建多个文件 删除 ...

  2. 轻量级监控平台之cpu监控

    轻量级监控平台之cpu监控脚本 #!/bin/bash #进程监控脚本 #功能需求: 上报机器的硬件层面-cpu负载数据 . /etc/profile . ~/.bash_profile pushur ...

  3. 【转载】Spring学习(1)——快速入门--2019.05.19

    原文地址:https://www.cnblogs.com/wmyskxz/p/8820371.html   认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念 ...

  4. Codeforces Round #606 (Div. 2)

    传送门 A. Happy Birthday, Polycarp! 签到. Code /* * Author: heyuhhh * Created Time: 2019/12/14 19:07:57 * ...

  5. 纯CSS实现自动轮播,CSS变量的定义与使用,计算属性的使用

    先来看一下实现的效果: 实现原理: HTML中使用ul>li存放图片 CSS使用CSS3的animation来完成动画 <!-- HTML --> <section class ...

  6. misc-3-1

    无后缀,用winhex发现是rar,添加后缀解压,依据是无后缀,丢到kali,是一个流量数据包 TCP追踪流在第五个数据包发现flag.rar 导出对象 选择HTTP 找到flag.rar 然后丢到你 ...

  7. springmvc 什么时候 set applicationContext 到 ServletConfig 的?

    springmvc 什么时候 set applicationContext 到 ServletConfig 的? FrameworkServlet --> initWebApplicationC ...

  8. ASM与ASMD

    时序机 状态机 控制器 数据通路之间的关系 样例代码

  9. luoguP3246 [HNOI2016]序列

    题意 这题很难想到用莫队去做,因为第一印象是这个没办法O(1)移动指针. 考虑从\([l,r]\)移动到\([l,r+1]\) (从\([l,r]\)移动到\([l-1,r]\)同理). 我们用ST表 ...

  10. Mysql中事务ACID实现原理

    引言 照例,我们先来一个场景~ 面试官:"知道事务的四大特性么?"你:"懂,ACID嘛,原子性(Atomicity).一致性(Consistency).隔离性(Isola ...