html - 相对位置元素超出 CSS 中的值

Question

我将位置设置为 relative 并设置top为-150px，但实际大小不同。问题是什么？不过设置top为0OK。

标签： htmlcsscss-position

Answer 1

这个问题非常模糊。我希望一旦问题得到澄清，我可以编辑这个答案。

根据您的问题和所附图片，您用来测量重叠的任何东西似乎都是错误的。我下载了你的图片并将元素分成四个相等的部分。恰好有一个部分在有色元素之外，这意味着150px元素的部分是重叠的。(200/4*3 = 150) 我使用 Sketchbook 并复制/粘贴了相同的“工字梁”形状。

这是我查找 CSS 位置问题的方法：

1. 有问题的元素的padding和margin设置是什么？

2. 包含相关元素的元素的paddingand设置是什么？margin

3. 我使用了正确的position属性吗？记住：

元素position: relative;相对于其正常位置定位。设置相对定位元素的 top、right、bottom 和 left 属性将导致它被调整远离其正常位置。其他内容不会被调整以适应元素留下的任何间隙。

position: static;没有以任何特殊方式定位的元素；它始终根据页面的正常流程进行定位。默认情况下，HTML 元素是静态定位的。静态定位元素不受 top、bottom、left 和 right 属性的影响。

元素position: fixed;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

一个元素position: absolute;相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。然而; 如果绝对定位元素没有定位的祖先，它使用文档正文，并随着页面滚动移动。注意：“定位”元素是指位置为除 之外的任何元素的元素static。

元素position: sticky;的定位基于用户的滚动位置。

4. position包含相关元素的元素的属性是什么？

5. 我是否使用了可能会混淆我正在做的事情的工具？我是否使用了不准确或不可靠的浏览器扩展程序？如有疑问，请使用铅笔和一张纸来确定事物的外观。

6. （非常重要）如果我必须提出问题，我必须提供某人回答所需的所有信息！社区可以提供出色的反馈，通常比我们需要的要多，但如果他们没有一个格式正确的问题，他们就会束手无策。如有疑问，请发布更多代码而不是更少。