CSS上でpositionプロパティを使用した後、画像が重ねて配置されています

-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上でpositionプロパティを使用した後、画像が重ねて配置されています

出典

2017-09-17 trooper92

イメージがどのようにラップしているかのスナップショットを表示できますか？また、何が起こると思いますか？ –

問題は、要素内のすべてが絶対的に配置されていれば、その要素は効果的にコンテンツを持たないため、その高さは0になります。
つまり、すべてのboxWrap divは高さが0で、窓の中の同じ場所にあり、その区域から溢れています。

解決策：画像が絶対に配置されないようにして、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

私はあなたがそれを2回使用し、問題はクラスで「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上でpositionプロパティを使用した後、画像が重ねて配置されています

答えて

関連する問題