0
CSS - マイナス、それ以下のギャップを取り除くためにどのようにトップ値
3列の相対と呼ばれるコンテナにある「ソリューションスペア」が。私は、これはあなたがスクリーンショットに見えるものである振る舞いを期待されていることを知っている
.relative {
top: -10rem;
position: relative;
}
：私はそれを以下の性質を与えています。
また、3つの列の下にコンテンツがあることがわかります。これが私の問題を解決する場所です。
マイナスの値を与えて、3つの列が表示されると予想される領域を取り除く方法があるかどうかを知りたいと思います。
1つの解決策は、コンテンツにマイナス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>
（スニペットの例では、それが動作します）、それが動作するかどうか私に教えて要素が元々確保していたであろうスペースを残す。あなたが実際に達成しようとしていることに応じて、代わりに負のマージントップを使用すると効果があります。 – CBroe
基本的に上記のdivをオーバーラップするには3つの列が必要です。 –
ライブサンプル、jsfiddleなどを提供してください。 [mcve] – CBroe