css - bootstrap 使 div 重叠

Question

我正在尝试使用 Bootstrap 实现以下布局。我可以这样做，但是在小屏幕上会出现问题，最中间的框(最小的框)不会出现在它应该出现的位置，它会上升。所以想尝试使用 Bootstrap 。 enter image description here

Answer 1

这个解决方案怎么样。我对您的代码做了一些改动。

请仔细看

DEMO

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0.5px solid black;
}

.top-cover {
    width: 100%;
    height: 300px;
    background-image: url('IMG_0044.JPG');
    background-size: cover;
    background-position: center;
}

.main-cover {
    width: 90%;
    position: relative;
    height: 700px;
    left: 5%;
    top: -60px;
    z-index: 1;
    background-color: brown;
    border: solid 5px green;
}

#dp {
    width: 20%;
    position: absolute;
    left: 40%;
    top: -10%;
    z-index: 2;
    display: none;
}

.dp-pic {
    width: 20vw;
	min-width: 75px;
	max-width: 150px;	
    position: absolute;
    left: 40%;
    top: -8%;
    
}

<div class="top-cover">

</div>

<div class="main-cover">
    <div id="dp"></div>
    <img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">


</div>