Question

三个“备件解决方案”列位于名为relative的容器中。我给它下面的属性：

.relative {
    top: -10rem;
    position: relative;
}

我知道这是您在屏幕截图中看到的预期行为。

您还可以看到三列下方有内容。这是我遇到问题的地方。

我想知道是否有办法给出一些负值，并摆脱它希望看到三列的空间。

一种解决方案是给内容减去10的值。但我想避免这种情况，因为这个空间属于内容。

这是我目前的HTML：

<div class="relative home-top-minus">
    <div class="row three-column-margin">
        <div class="column small-12 medium-4">
            <div class="panel-orange text-center column-padding">
                <img src="http://placehold.it/200x150" alt="" />
                <h3 class="heading-tan heading-padding-small">SPARES SOLUTIONS</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                    ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
                </p>
                <a href="#"
                   class="button large">LEARN MORE</a>
            </div>
        </div>
        <div class="column small-12 medium-4">
            <div class="panel-light-orange text-center column-padding">
                <img src="http://placehold.it/200x150" alt="" />
                <h3 class="heading-brown heading-padding-small">SPARES SOLUTIONS</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                    ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
                </p>
                <a href="#"
                   class="button large">LEARN MORE</a>
            </div>
        </div>
        <div class="column small-12 medium-4">
            <div class="panel-brown text-center column-padding">
                <img src="http://placehold.it/200x150" alt="" />
                <h3 class="heading-light-orange heading-padding-small">SPARES SOLUTIONS</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                    ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
                </p>
                <a href="#"
                   class="button large">LEARN MORE</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="column small-12 medium-4">

            <div class="bubble">
                <p>
                    “Click Spares have saved us
                    thousands since we joined!!!”,
                    really great service and they
                    know exactly how to deal with
                    tricky customers”
                </p>
                <p class="heading-light-orange">
                    Product Retail Manager
                </p>
            </div>

        </div>
        <div class="column small-12 medium-8">
            <h2 class="h1 heading-light-orange">WHY CLICK SPARES</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
            </p>
            <a href="#"
               class="button large alt">LEARN MORE</a>
        </div>
    </div>
</div>

Answer 1

使用margin-top:-10rem代替top:-10rem并使用z-index:999或大于顶部div的内容（.relative之前的div）（在此示例中为{{1}有} top）。如果它没有z-index:2手动给出一个

z-index，.top{z-index:2}

让我知道它是否有效（在代码段示例中有效）

＆＃13;

.relative{z-index:3}

＆＃13;

.relative {
    margin-top: -10rem;
    position: relative;
    z-index:999;

}
.top {
  height:200px;
  background:blue;
  position:relative;
  z-index:2;
}
.bottom {
  height:200px;
  background:blue;
}

＆＃13;

Answer 2

只需使用margin-top: -10rem;代替top: -10rem;

CSS - 减去最重要的价值如何摆脱它下方的差距

2 个答案: