美文网首页
css:解决position: relative定位后出现的空白

css:解决position: relative定位后出现的空白

作者: 明灭_ | 来源:发表于2019-03-29 13:30 被阅读0次

问题描述

某一元素设置position: relative之后,原本的位置会留下一块空白区域,其后的元素并不会自动补全这块空白。

问题原因

该关键字(position: relative)下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置,因此会在此元素未添加定位时所在位置留下空白。

解决方法

  1. 使用绝对定位
  2. 使用诸如margin-top: -10px代替position: relative; top:-10px实现相同效果
  3. 给其后的每个元素均设置position: relative,使其移动一个相同的值。(显然不是一个好方法)

相关文章

  • css:解决position: relative定位后出现的空白

    问题描述 某一元素设置position: relative之后,原本的位置会留下一块空白区域,其后的元素并不会自动...

  • css:解决position: relative定位后出现的空白

    问题描述 某一元素设置position: relative之后,原本的位置会留下一块空白区域,其后的元素并不会自动...

  • css学习笔记:定位position

    css position定位 position选值类型: static:默认状态,不开启定位 relative:相...

  • css中的定位

    css中的定位分为4种 1;相对定位position: relative; 特点;1,他定位后不脱离标准流...

  • 二十,CSS定位概述与相对定位

    CSS定位:position:relative(相对)/absolute(绝对)/ static(无定位)/ fi...

  • 关于CSS定位

    在CSS中关于定位的内容是:position:relative(相对定位)absolute(绝对定位) ...

  • Html>(定位)position

    position:relative(相对定位) position:relative; 相对定位 position...

  • CSS - 定位

    CSS 中的层级概念 CSS中分为3层 最上层:定位元素层(position:relative、position:...

  • position属性

    css position属性 static: 默认值。没有定位,元素出现在正常的流中。 relative:生成相对...

  • CSS定位

    定位机制 普通流 浮动 绝对定位 CSS position属性 static 元素框正常生成。 relative ...

网友评论

      本文标题:css:解决position: relative定位后出现的空白

      本文链接:https://www.haomeiwen.com/subject/bdqlbqtx.html