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

Posted 2023-03-05

【中文标题】相对位置元素超出 CSS 中的值

【英文标题】：Relative position Element exceed over value in CSS

【发布时间】：2020-02-18 16:17:16

【问题描述】：

我将位置设置为相对并将top设置为-150px，但实际大小不同。 问题是什么？ 将top 设置为0 是可以的。

【问题讨论】：

请阅读How to Ask和minimal reproducible example，然后相应地编辑您的问题。与您的问题相关的代码直接属于您的问题，以文本形式和正确格式或作为 sn-p。不要只发布代码的图片。

能否请您显示在Codepan or jsfiddle

嗨@chakmeshma，您能否提供一个最小的 html/CSS 代码，以便我们可以在本地复制它。这将帮助我更清楚地理解这个问题。谢谢。

在哪里。是。这。代码？

可以设置margin: -150px auto 0，您没有提供代码sn-ps，所以我们不知道您的问题详情。

【参考方案1】：

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

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

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

为相关元素设置的padding 和margin 是什么？

为包含相关元素的元素设置的padding 和margin 是什么？

我是否使用了正确的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; 的元素根据用户的滚动位置进行定位。

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

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

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

【参考方案2】：

你凭直觉知道top: -150px 是对的。在一个最小的例子中，你正在尝试做的工作：

/**
 * all of this is for demonstration purposed only,
 * to calculate and display how much space is left between the two divs
 */

const elOne = document.querySelector('.one');
const elTwo = document.querySelector('.two');
const elDiff = document.querySelector('#diff');

const elOneTop = elOne.getBoundingClientRect().top
const elTwoTop = elTwo.getBoundingClientRect().top

const diff = Math.abs(elOneTop - elTwoTop);

elDiff.innerText = `Diff is $diffpx`;

.one 
  background: linear-gradient(90deg, #ad057f, #310492);
  height: 200px;


.two 
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.25);
  height: 200px;
  margin: 0 auto;
  position: relative;
  top: -150px;
  width: 80%;




/**
 * everything after here is for demonstration purposes only,
 * to display how much space is left between the two divs
 */

.one 
  position: relative;


.measurement 
  align-items: center;
  display: flex;
  font-size: 12px;
  height: 50px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;


.measurement span 
  background: #fff;
  border: 2px solid #000;
  display: inline;
  padding: 2px;
  position: relative;

  
.measurement::before 
  background: #000;
  content: '';
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 2px;

.one's 200px height - .two's shift should leave 50px difference

<div class="one">
  200px tall
  
  <!--
    this div for demonstration purposes only,
    to calculate and display how much space is left between the two divs
   -->
  <div class="measurement"><span id="diff"></span></div>
</div>

<div class="two">
  Top -150px
</div>

你可以在https://codepen.io/henry/pen/XWJzKqO玩这个例子

请注意，这适用于 Chrome，无需任何“重置”样式（例如更改 box-sizing）。另请注意，“50px”测量框是绝对定位的，不会以任何方式影响“测试”框的放置。

“问题是什么？”的基本答案您是否有一些 HTML 或 CSS 或两者都有，您忘记了正在影响事物。我建议您查看屏幕截图中“样式”选项卡旁边的“计算机”选项卡，以查看您应用于给定 DOM 元素的所有 CSS。

要更准确地回答，我们需要更多信息。

【参考方案3】：

在无法查看您的代码以了解您想要完成的任务的情况下，也可以使用margin-top 来移动元素。

.element 
  height: 100px;
  width: 100%;


.colorized 
  background: linear-gradient(to left, red, blue)


.text 
  border: 1px solid #000;
  box-sizing: border-box; /* adjust for border */


.text:not(.another) 
  margin-top: -20px;

<div class="colorized element">

</div>
<div class="text element">text</div>
<div class="another text element">text</div>

另一个选项可以是 translate 元素，但无论如何您都需要使用 margin 将以下元素拖向已翻译的元素。

.element 
  height: 100px;
  width: 100%;


.colorized 
  background: linear-gradient(to left, red, blue)


.text 
  border: 1px solid #000;
  box-sizing: border-box; /* adjust for border */


.text:not(.another) 
  --translated-distance: -20px;
  transform: translateY( var(--translated-distance) );
  margin-bottom: var(--translated-distance);

<div class="colorized element">

</div>
<div class="text element">text</div>
<div class="another text element">text</div>

【参考方案4】：

看过这个问题后，我明白这是一个尴尬的问题。

我认为这是我自己构建的，您可以按浏览器上角的省略号并将缩放设置为 100%。这可以通过按 'ctrl + 0' 或 'cmd + 0' 来完成。

我认为它正确地移动了元素，但是如果放大它会增加相关框的高度。查看您的图像，您希望该框比前一个框的末端高 3/4（200 像素高度 - 距离顶部 150 像素）。图片似乎反映了这一点。

这里有一个堆栈小提琴供您使用：

* 
	margin: 0;
	padding: 0;
	box-sizing: border-box;


.container 
	width: 100%;
	height: 300px;
	background-image: linear-gradient(to right, red , yellow);


.container-overlap 
	width: calc(100% - 200px);
	height: 200px;
	margin: 0 auto;
	position: relative;
	top: -150px;
	border: 5px solid green;
	box-shadow: 0px 0px 6px 1px rgba(0,0,0,1);


.extra-container 
	width: 100%;
	height: 300px;
	background-color: purple;

<div class="container">
</div>
<div class="container-overlap">
	Testing the overlap!
</div>
<div class="extra-container">
</div>

对于一个令人难以置信的问题，这似乎是一个简单的解决方案，如果失败了 - 您也有一个工作示例可以从这里构建您的代码。