Хочу наложить один блок div на другой. При этом нужно его правильно позиционировать. Я пытался делать через position:absolute
, но это не годится, т.к. блок становиться не адаптивным. Хочу чтобы блок signform
был над блоком bg
и при этом позиционировался относительно блока bg
.
.bg {
background-color: rgba(15, 26, 47, 0.9);
max-width: 920px;
height: 420px;
margin: 0 auto;
margin-top: 105px;
z-index: 36;
}
.signform {
background-color: rgb( 255, 255, 255);
box-shadow: 0px 0px 140px 0px rgb( 50, 66, 91);
width: 462px;
height: 462px;
float: left;
}
<div class="content">
<div class="container">
<div class="bg">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-offset-3 goodsleft">
<h3>Don't have an account?</h3>
<hr class="hidden-xs">
<p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolorem totam, ipsum dolore asperiores nihil alias id modi tempore, laudantium soluta dicta, vel enim possimus vero, autem libero. Reiciendis, quasi?</p>
<button type="button" class="login">Sign Up</button>
</div>
<div class="col-sm-4 col-sm-offset-3 col-xs-offset-3 goodsright">
<h3>Have an account?</h3>
<hr class="hidden-xs">
<p class="hidden-xs">Lorem ipsum dolor sit amet <br> consectetur adipisicing elit?</p>
<button type="button" class="login">Login</button>
</div>
</div>
<div class="signform ">
<div class="signcont">
<h3>Login</h3>
<img src="img/logo.png" alt="">
<br>
<hr>
<br>
<p>Email<span>*</span></p>
<img src="img/ic_mail.png" alt="">
<input type="text" class="datainput">
<p>Password<span>*</span></p>
<img src="img/ic_lock.png" alt="">
<input type="password" class="datainput">
<button type="submit" class="inputsubmit">Login</button>
<a href="#">Forgot?</a>
</div>
</div>