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

问题描述

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

问题原因

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

解决方法

  1. 使用绝对定位
  2. 使用诸如margin-top: -10px代替position: relative; top:-10px实现相同效果
  3. 给其后的每个元素均设置position: relative，使其移动一个相同的值。（显然不是一个好方法）
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,963评论 1赞 45
  • CSS
    一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css...
    KunMitnic阅读 4,540评论 0赞 1
  • HTML+CSS基础（CSS篇下）
    CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 5,068评论 0赞 3
  • Html&CSS（二）
    本文主要是起笔记的作用，内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,477评论 0赞 30