Max Lynn Max Lynn - 3 months ago 9
CSS Question

CSS - Minus top value how to get rid of the gap below it

enter image description here

The three 'Spares Solutions' columns are in a container called relative. I have given it the properties below:

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


I know that this is expected behaviour which is what you see in the screenshot.

You can also see that there is content below the three columns. This is where I get my problem.

I would like to know if there is a way to give something a minus value and get rid of the space where it expects to see the three columns.

one solution would be to give the content a minus 10 value. But I would like to avoid this due to the space then being under the content.

This is my current 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

use margin-top:-10rem instead of top:-10rem and use z-index:999 or something bigger than the div on the top ( the div before .relative ) has ( in this example top has z-index:2 ) . if it doesn't have a z-index give one manually

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

let me know if it works ( in the snippet example it works )

.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>