html - CSS - 减去最高值如何摆脱它下面的差距

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 )有(在这个例子中 top 有 z-index:2 )。如果它没有 z-index 手动给一个

.top{z-index:2} , .relative{z-index:3}

让我知道它是否有效(在片段示例中它有效)

.relative {
    margin-top: -10rem;
    position: relative;
    z-index:999;

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

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="top">

</div>

<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>
<div class="bottom">

</div>