负边际不是解决方案 - 但是什么是？

Question

这是设计的一部分：

正如您所看到的 - 它只是一个完全位于两个div之间的按钮。代码很简单：

        <div class="uc-apply-widget1">
            <div class="top">
            </div>
            <div class="bottom">
                <a>Get Started</a>
            </div>
        </div>

.uc-apply-widget1
{
    .top
    {
        background-color:@primary-color;
        height:30rem;
    }
    .bottom
    {
        background-color:@primary-600;
        padding:0 1.6rem 1.6rem 1.6rem;

        a
        {
            margin-top:-2.8rem;
        }
    }
}

但是，我遇到了使用负边距的问题。我希望能够通过应用半高负边距移动底部div之外的按钮。虽然按钮确实向上移动，但它不会移动完整的2.8 rem - 即使我应用50rem，移动量也是相同的。

另一个解决方案是使用位置相对，它会向上移动按钮，但不会向上拖动底部div。

因此，我希望将按钮向上移动n个数量，并将底部div高度减少n个数量 - 任何想法 - 我可能只是度过了糟糕的一天。

Answer 1

使用

position: absolute;
top: 0; left: 0;
transform: translateY(-50%);

按钮上的

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Answer 2

这是实现设计的一种方式。

将a元素设置为display: table和position: absolute 顶部和左侧偏移分别为0和50％。

display: table规则会为您提供缩小到合适的宽度，这可能就是您所需要的。

然后，您可以使用CSS3 transform属性在X和Y方向上将元素转换-50％以获得居中。

此处的优点是您不必指定a元素的尺寸。

＆＃13;

＆＃13;

.uc-apply-widget1 {
  width: 400px;
  margin: 0 auto;
}
.top {
  background-color: beige;
  height: 10rem;
}
.bottom {
  background-color: lightgray;
  height: 5rem;
  padding: 0 1.6rem 1.6rem 1.6rem;
  position: relative;
}
a {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 10px;
  border: 1px dotted blue;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

＆＃13;

<div class="uc-apply-widget1">
  <div class="top">
  </div>
  <div class="bottom">
    <a>Get Started</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;