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 - 減號最高值如何擺脫的差距下方

回答

相關問題