CODEWITHSUNDEEP
csstwitter-bootstrapresponsive
user6414182
user6414182

Reputation: 11

bootstrap make divs overlap

I am trying to achieve below layout using bootstrap. I am able to do it otherwise but problem occurs on small screens where the middle most box(smallest one) will not appear where it should be, it goes up. so want to try using bootstrap.enter image description here

Upvotes: 0

Views: 10336

Answers (2)

rmbits
rmbits

Reputation: 2327

Following should generate your desired layout. Add borders or other fancy styles as you want.

body {
  margin: 0;
  padding: 0;
}

.top-cover {
  width: 100%;
  height: 300px;
  background: #eee;
}

.main-cover {
  width: 90%;
  height: 700px;
  position: relative;
  margin: -60px auto 0;
  z-index: 1;
  background-color: brown;

}

#dp {
  width: 20%;
  position: absolute;
  left: 50%;
  margin: -10% 0 0 -10%;
  z-index: 2;
}

.dp-pic {
  width: 100%;
}
<div class="top-cover">

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

Upvotes: 1

Prince Sodhi
Prince Sodhi

Reputation: 2955

how about this solution. I have made few changes in your code.

please have look carefully

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>

Upvotes: 1

Related Questions