Div is under other divs - html

Question

I'm trying to put a form on a div where I have an image:Form on the image
The problem is that I cannot float the form to the right side and also the form is under the other divs just as the image I've also attached here:
Form under other divs
.slider__size {
overflow: hidden;
height: 570px;
position: relative;
font-family: "DINNextLTProLight";
}
.slider__img__position {
justify-content:center;
align-items:center;
display: flex;
position: absolute;
}
.slider__consolidado__img__position {
justify-content:center;
align-items:right;
display: flex;
position: absolute;
}
.img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
height: auto;
margin: auto;
position: relative;
}
.title__box {
padding-top:200px;
position: absolute;
padding-left: 50px;
}
.h1__home span{
color: white;
font-size: 50px;
letter-spacing: 1px;
font-weight: bolder;
}
#media (min-width: 600px) and (max-width: 992px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 150%;
height: auto;
position: relative;
margin: auto;
}
}
#media (min-width: 400px) and (max-width: 600px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 250%;
}
}
#media (max-width: 400px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 300%;
height: auto;
position: relative;
margin: auto;
}
#media (max-width: 300px) {
.img-responsive, .thumbnail a>img, .thumbnail>img {
max-width: 400%;
}
}
}
#media (min-width: 768px) {
.navbar-fixed-bottom { display: none;}
}
#media (min-width:768px){
.form__consolidado__color {
margin-top: 120px;
position: absolute;
margin-left: 20px;
box-shadow: 0 0 6px 0px black;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 slider__size">
<div class="slider__consolidado__img__position">
<img class="img-responsive img__blend__filter" src="/slider_notebook.jpeg"
alt="Crédito Família">
</div>
<div class="title__box">
<h1 class="h1__home"><span>Comece<br>a realizar<br>sonhos</span</h1>
<button class="btn-default btn-padding btn__slider__color_orange">
Saiba mais
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 form__consolidado__color">
<h2 class="form__title">Lorem Ipsum</h2>
<h3 class="form__subtitle">What's Lorem Ipsum</h3>
<form data-toggle="validator" role="form" name="contato" action="" method="POST">
<div class="form-group row">..... </div>
<div class="row">
<div class="col-sm-12 div__info__color">
<h2 class="text__blue__h2">.....</h2>
<p class="text__grey__14">......</p>
</div>

Answer 1

The problem of the form being under other divs can be solved by setting the "z-index" property of the div containing the form to a high value which will make the form appear on the first level
z-index: 100
.col-xs-12.col-sm-6.form__consolidado__color {
float: right;
}

Answer 2

I solved the float problem with margin-left:45%;