CSS - 减号最高值如何摆脱的差距下方

三个“备件解决方案”列是相对的容器调用。我已经给它的属性如下：

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

来源

2016-08-18 Max Lynn

相对定位留下元素原先保留的空间。根据您实际尝试实现的情况，使用负边距顶部可能会起作用。 – CBroe

我需要三列重叠上面的div基本上。 –

请提供一个现场示例，jsfiddle或其他东西。 [mcve] – CBroe

使用margin-top:-10rem和使用z-index:999或在上面的东西比格大（.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>

来源

2016-08-18 11:56:54

只需使用margin-top: -10rem;，而不是代替top:-10remtop: -10rem;

来源

2016-08-18 11:26:04 Anton

这不会将它从容器面板中推出 - tan –

CSS - 减号最高值如何摆脱的差距下方

回答

相关问题