设置了相对定位relative之后,改变top值,如何去掉多余空白?
众所周知,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值,如何去掉多余空白?的更多相关文章
- [Android] 对ImageView设置属性scaleType为FIT_START,如何去掉多余空白
当对ImageView设置了属性scaleType为FIT_START时,可以通过调用ImageView的setAdjustViewBounds(true). 即: imageView.setScal ...
- 尽量使用translate而不是改变top/left进行动画(翻译)
前言 本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left,本文有改动,添加了一些作者自己的理解,不当之 ...
- Top值
业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...
- 再谈 apache设置virtualhost + apache的一些相关设值
首先 要弄懂究竟什么是, vitrual host: 虚拟主机, 他有什么用处? 就是说: 一台计算机(server)中, 通常只是放一个网站/站点 但是 如果机器紧张, 服务器性能比较好,或访问的站 ...
- div+Css绝对定位(absolute)和相对定位(relative)的总结
1.没有外Div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上 3.若父Div没有设置定位,子Di ...
- java 数据类型:集合接口Collection之List~ArrayList:remove移除;replaceAll改变原有值;sort排序;迭代器listIterator();
什么是List集合: 特点: 元素有序可重复的集合. 集合中每个元素都有其对应的顺序索引. List集合默认按元素的添加顺序设置元素的索引,索引从0开始. List接口的常用方法: List可以使 ...
- js设置、获取单值cookie和多值cookie
js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...
- c# 根据配置文件路径,设置和获取config文件 appSettings 节点值
/// <summary> /// 获取编译后的主配置文件节点值 /// </summary> /// <param name="key">&l ...
- jquery设置div,文本框 表单的值示例
我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...
随机推荐
- python while语句
一.while 1.while 死循环 f=True while f: print(1) print(2) 2.while 活循环 ①.正序 count = 1 while count <= 5 ...
- Recover With Until Time fails With RMAN-20207 When Time Is Before Last RESETLOGS (Doc ID 159405.1)
Recover With Until Time fails With RMAN-20207 When Time Is Before Last RESETLOGS (Doc ID 159405.1) A ...
- 008.MongoDB分片群集概念及原理
一 MongoDB分片介绍 1.1 分片 Mongodb另一种集群,就是分片技术,可以满足MongoDB数据量大量增长的需求. 当MongoDB存储海量的数据时,一台机器可能不足以存储数据,也可能不足 ...
- 【poj2661】Factstone Benchmark(斯特林公式)
传送门 题意: 给出\(x,x\leq 12\),求最大的\(n\),满足\(n!\leq 2^{2^x}\). 思路: 通过斯特林公式: \[ n!\approx \sqrt{2\pi n}\cdo ...
- C++并发编程实战
第1章 你好,C++并发世界 第2章 管理线程 第3章 在线程间数据共享 第4章 同步并发操作 第5章 C++内存模型和原子类型操作 第6章 设计基于锁的并发数据结构 第7章 设计无锁的并发数据结构 ...
- 【洛谷5368】[PKUSC2018] 真实排名(组合数学)
点此看题面 大致题意: 有\(n\)个数字,定义一个数的排名为不小于它的数的个数.现要随机将其中\(k\)个数乘\(2\),求对于每个数有多少种方案使其排名不变. 分类讨论 对于这种题目,我们可以分类 ...
- php 压缩字符串
压缩字符串: base64_encode(gzcompress(serialize($data))) 解压字符串: unserialize(gzuncompress(base64_decode($se ...
- 大话设计模式Python实现-职责链模式
职责链模式(Chain Of Responsibility):使多个对象都有机会处理请求,从而避免发送者和接收者的耦合关系.将对象连成链并沿着这条链传递请求直到被处理 下面是一个设计模式的demo: ...
- 12-UA池和代理池
一.UA池和代理池 1.UA池 scrapy的下载中间件: 下载中间件(Downloader Middlewares) 位于s ...
- JMS入门Demo
2.1点对点模式(邮箱) 点对点的模式主要建立在一个队列上面,当连接一个列队的时候,发送端不需要知道接收端是否正在接收,可以直接向ActiveMQ发送消息,发送的消息,将会先进入队列中,如果有接收端在 ...