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 속성을 사용하여 이미지를 넣으려고했습니다. 기본적으로, 이미지의 부모에게 이미지의 "relative"값과 "absolute"값을주었습니다. 얼마나 많은 요소를 첫 번째 "boxWrap"div에서 "after"했는지에 관계없이 항상 div 클래스의 첫 번째 div 위에 배치됩니다. 페이지의 정상적인 흐름을 복원하려면 어떻게해야합니까?CSS의 position 속성을 사용하면 이미지가 서로 위에 놓여집니다.

출처

2017-09-17 trooper92

이미지가 서로 래핑되는 방식에 대한 스냅 샷을 표시 할 수 있습니까? 또한, 당신은 무엇을 기대 했습니까? –

문제는 요소 내부의 모든 것이 절대적으로 배치 된 경우 그 높이가 즉 0
을 할 수 있도록, 요소가 효과적으로 더 이상 모든 boxWrap div를 가지고, 어떤 내용이 없다는 것이다 높이 0 내부 imgs 창에서 같은 자리에 모두있다가 divs에서 넘쳐 흐른다.

해결 방법 : div38에서 공간을 차지하도록 이미지를 절대 배치하지 말고 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의 position 속성을 사용하면 이미지가 서로 위에 놓여집니다.

답변

관련 문제