【问题讨论】：
Codepan or jsfiddle
margin: -150px auto 0，您没有提供代码sn-ps，所以我们不知道您的问题详情。
标签： html css css-position
这个问题很模糊。我希望一旦问题得到澄清，我可以编辑这个答案。
根据您的问题和所附图片，您用来测量重叠的任何东西似乎都有问题。我下载了你的图片并将元素分成四个相等的部分。恰好有一部分在彩色元素之外，这意味着元素的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 属性是什么？
我是否使用了可能会混淆我正在做的事情的工具？我是否使用了不准确或不可靠的浏览器扩展程序？如有疑问，请使用铅笔和一张纸来确定事物的外观。
（非常重要）如果我必须提出问题，我必须提供某人回答所需的所有信息！社区可以提供出色的反馈，通常比我们需要的要多，但如果他们没有一个格式正确的问题，他们就会束手无策。如有疑问，请发布更多代码而不是更少。
【讨论】：
你凭直觉知道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 ${diff}px`;.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。
要更准确地回答，我们需要更多信息。
【讨论】：
在无法查看您的代码以了解您想要完成的任务的情况下，也可以使用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>【讨论】：
看过这个问题后，我明白这是一个尴尬的问题。
我认为这是我自己构建的，您可以按浏览器上角的省略号并将缩放设置为 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>对于一个令人难以置信的问题，这似乎是一个简单的解决方案，如果失败了 - 您也有一个工作示例可以从这里构建您的代码。
【讨论】：