html - div 在其他 div 之下

Question

我正在尝试将表单放在我有图像的 div 上:Form on the image

问题是我无法将表单 float 到右侧，而且表单位于其他 div 下方，就像我在此处附加的图像一样: 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

可以解决表单在其他div下的问题，方法是将包含表单的div的“z-index”属性设置为高值，使表单出现在第一层

z-index: 100

.col-xs-12.col-sm-6.form__consolidado__color {
   float: right;
}