<!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 속성을 사용하면 이미지가 서로 위에 놓여집니다.
이미지가 서로 래핑되는 방식에 대한 스냅 샷을 표시 할 수 있습니까? 또한, 당신은 무엇을 기대 했습니까? –