在CSS上使用位置屬性後，圖像被置於彼此之上

-2

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>...</title> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
    <!-- My Styles --> 
    <style> 
     .boxWrap { 
      position: relative; 
     } 

     .boxItem { 
      position: absolute; 
     } 

     h1 { 
      color: white; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-12 boxWrap"> 
       <div class="boxWrap"> 
        <img src="01.png" class="img-fluid boxItem" alt=""> 
       </div> 
      </div> 
      <div class="col-12 boxWrap"> 
       <div class="boxWrap"> 
        <img src="01.png" class="img-fluid boxItem" alt=""> 
       </div> 
      </div> 
      <div class="col-12 boxWrap"> 
       <div class="boxWrap"> 
        <img src="01.png" class="img-fluid boxItem" alt=""> 
        <h1 class="boxItem">hello</h1> 
       </div> 
      </div> 
      <div class="col-12 boxWrap"> 
       <div class="boxWrap"> 
        <img src="01.png" class="img-fluid boxItem" alt=""> 
        <h1 class="boxItem">hello</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
    </body> 
</html>

好吧，我一直試圖通過使用CSS中的position屬性來放置文本和圖像。基本上，我給圖像的父母「相對」的值和「絕對」值的圖像。事實證明，無論我在第一個「boxWrap」div之後放置了多少元素，它們總是被放置在該類的第一個div的頂部。我怎樣才能恢復正常的頁面流？在CSS上使用位置屬性後，圖像被置於彼此之上

來源

2017-09-17 trooper92

您能否展示圖像如何相互映照的快照？另外，你預計會發生什麼？ –

的問題是，如果一個元素中的一切絕對定位，元素有效地不再具有任何內容，所以它的高度將是0
換句話說，你的所有boxWrap的div的高度爲0和內部IMGS都在窗口的同一個地方，從他們的div中溢出。

解決方案：不要絕對放置圖像，以便它們佔用div中的空間，並使用top和left將絕對定位的文本放置在正確的位置。

.boxWrap { 
 
    position: relative; 
 
} 
 

 
.boxItem { 
 
    /* no styles for boxItem */ 
 
} 
 

 
/* new class boxText */ 
 
.boxText { 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    color: white; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-12 boxWrap"> 
 
     <div class="boxWrap"> 
 
     <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="col-12 boxWrap"> 
 
     <div class="boxWrap"> 
 
     <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="col-12 boxWrap"> 
 
     <div class="boxWrap"> 
 
     <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt=""> 
 
     <h1 class="boxText">hello</h1> 
 
     </div> 
 
    </div> 
 
    <div class="col-12 boxWrap"> 
 
     <div class="boxWrap"> 
 
     <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt=""> 
 
     <h1 class="boxText">hello</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-17 07:32:49

它的工作！謝謝利斯特先生。我欠你一個人情。 – trooper92

我認爲這個問題是與類「boxWrap」，你用了兩次，刪除與「COL-12」使用，因此它看起來像這樣的一個：

<div class="col-12"> 
     <div class="boxWrap"> 
      <img src="01.png" class="img-fluid boxItem" alt=""> 
     </div> 
</div>

來源

2017-09-17 07:37:57

在CSS上使用位置屬性後，圖像被置於彼此之上

回答

相關問題