爲什麼我的位置絕對不起作用？

我試圖在我的網站上製作這個組件。我想在右側留下一些圖片。它應該適應文字大小，並且必須始終處於最底層。我認爲這是可能的位置：絕對和底部：0。但它不起作用。它一直在我的排上，我不知道爲什麼。爲什麼我的位置絕對不起作用？

.b-image { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
.over-image { 
 
    position: relative; 
 
} 
 

 
.content-width { 
 
    max-width: 1440px; 
 
    min-width: 300px; 
 
    margin: 0 auto; 
 
    padding: 0 24px; 
 
    position: relative; 
 
} 
 

 
section { 
 
    padding: 48px 0; 
 
    border-bottom: 1px solid #0000ff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section> 
 
    <div class="row"> 
 
    <div class="content-width"> 
 
     <div class="content col-md-6"> 
 
     <h1> 
 
      Headline 
 
     </h1> 
 
     <p> 
 
      foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
     </p> 
 
     </div> 
 
     <div class="col-md-6 over-image"> 
 
     <img class="b-image" src="http://placehold.it/100x100" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2017-08-11 Paili

我沒有看到你使用'位置：absolute' - 應該說是到位的'位置：汽車'''.b-image'？ –

@RobinJames Ops，是的，你是對的。但仍然沒有奏效。 – Paili

如果你有一個元素放置在絕對內部，元素放置在相對位置，那麼絕對引用就是包含它的元素。 – Phylogenesis

如果我理解正確的，這是你想要的東西：https://jsfiddle.net/n1a70o1e/

你所要做的是使兩個div。一個包含內容，另一個包含圖像。爲了讓它們看起來相鄰，給它們一個49％和50％的寬度（50-50稍微寬一些）。使用display: inline-block來實現。它會讓你的div顯示在一起。然後，您必須使用左側或右側的float屬性。

將圖像放在容器中，就像您一樣。該容器將調整其父項，與您的文本相同的父項。使用圖像上的max-height用容器調整大小。

來源

2017-08-11 09:54:55

是的，但我想用bootstrap-grid。 – Paili

您可以使用flex來實現此目的。刪除position: absolute，只是給display: flex;到.content-width和align-self: flex-end;到.over-image

.over-image{ 
 
    position: relative; 
 
    align-self: flex-end; 
 
} 
 
.content-width { 
 
    max-width: 1440px; 
 
    min-width: 300px; 
 
    margin: 0 auto; 
 
    padding: 0 24px; 
 
    position: relative; 
 
    display: flex; 
 

 
} 
 

 
section { 
 
    padding: 48px 0; 
 
    border-bottom: 1px solid $primary-color-10; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <section> 
 
    <div class="row"> 
 
      <div class="content-width"> 
 
      <div class="content col-md-6"> 
 
       <h1> 
 
        Headline 
 
       </h1> 
 
       <p> 
 
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
       </p> 
 
       <h1> 
 
        Headline 
 
       </h1> 
 
       <p> 
 
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
       </p> 
 
       <h1> 
 
        Headline 
 
       </h1> 
 
       <p> 
 
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
 
       </p> 
 
      </div> 
 
      <div class="col-md-6 over-image"> 
 
       <img class="b-image" src="http://placehold.it/200x200" alt=""> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

來源

2017-08-11 09:56:12

取下.B像所有的風格和內容添加到.over圖像

.over-image{ 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
}

來源

2017-08-11 10:04:04 user3068032

好吧，現在我的照片在頂部。不在底部。 – Paili

如前所述在mdn文檔中

當位置設置爲絕對或固定時，底部屬性指定元素的底邊與其包含塊的底邊之間的距離。

containing block是一個相對定位的元素。在你的情況下，它是div.over-image它沒有指定的高度，並且由於引導類而被浮動。

所以圖像的下邊緣與div底邊對齊，因此它的幻覺總是與前一行文字重疊。爲了解決這個問題，你可以給一個高度的div.over-image，這又取決於你的圖像尺寸，或者你可以做

.b-image{ 
position: absolute; 
bottom: 0; 
top:0; }

這將導致你的img元素的頂部邊緣與包含您的頂部邊緣對齊DIV。

PS：不知道這是否是預期的結果，你想要的，但fiddle

來源

2017-08-11 10:14:45 semuzaboi

爲什麼我的位置絕對不起作用？

回答

相關問題