设置了相对定位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值，如何去掉多余空白？相关推荐

相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
一.绝对定位 position:absolute 绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含 ...
JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
《spark技术应用》课程期末考试大作业报告,使用eclipse完成求top值、文件排序、二次排序三个程序的个性化开发。
目录一.选题的目的及要求... 4 二.设计思路... 4 三.主要内容及关键技术.. 5 四.制作步骤... 5 1．准备工作... 5 1.1在VMware中安装一台Ubuntu64位系 ...
相对定位relative、绝对定位absolute、固定定位fixed
注:默认情况下的定位是 postion:static: 使用定位时,常常使用偏移量对位置进行描述:left.right.top.bottom 定位时,使用z-indent可以元素的堆叠顺序,例:z-i ...
jQuery中实现全选功能时使用attr( )改变checked值只能生效一次的问题
2019独角兽企业重金招聘Python工程师标准>>> 在jQuery中操作多选框checked数据不能使用attr()方法改变checked值, 要使用prop( )方法; 问题解 ...
关于驰骋表单引擎中字段扩展设置对文本框Pop窗体返回值的升级说明 2012/11/13...
为什么80%的码农都做不了架构师?>>> 关于驰骋表单引擎中字段扩展设置对文本框Pop窗体返回值的升级说明 2012/11/13 现有功能: 以前版本仅支持自己定义url,返回 ...
Overload重載和Override重写的区别。Overloaded的方法是否可以改变返回值的类型?
Overload是重载的意思,Override是覆盖的意思,也就是重写. 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的参数列表各不相同(即参数个数或类型不同). 重写Ove ...
JQueryDOM之设置和获取HTML、文本和值
设置和获取HTML.文本和值 html()方法:获得或设置某个元素的html元素 $(selector).html() $("p").html(); 该示例获得 ...

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

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

最新文章

热门文章