事業部是在其他的div

我試圖把窗體上一個div，我有一個形象：Form on the image 事業部是在其他的div

的問題是，我不能表格浮動到右側，也是形式下其他的div只是作爲形象我也附在這裏： Form under other divs

.slider__size { 
 
\t overflow: hidden; 
 
\t height: 570px; 
 
\t position: relative; 
 
\t font-family: "DINNextLTProLight"; 
 
} 
 
.slider__img__position { 
 
\t justify-content:center; 
 
    align-items:center; 
 
\t display: flex; 
 
\t position: absolute; 
 
} 
 

 
.slider__consolidado__img__position { 
 
\t justify-content:center; 
 
    align-items:right; 
 
\t display: flex; 
 
\t position: absolute; 
 
} 
 

 

 

 
.img-responsive, .thumbnail a>img, .thumbnail>img { 
 
\t \t display: block; 
 
\t \t height: auto; 
 
\t \t margin: auto; 
 
\t \t position: relative; 
 
\t } 
 

 
.title__box { 
 
\t padding-top:200px; 
 
\t position: absolute; 
 
\t padding-left: 50px; 
 
} 
 

 

 
.h1__home span{ 
 
\t \t color: white; 
 
    \t \t font-size: 50px; 
 
\t  \t letter-spacing: 1px; 
 
\t  font-weight: bolder; 
 
} 
 

 
@media (min-width: 600px) and (max-width: 992px) { \t 
 
\t .img-responsive, .thumbnail a>img, .thumbnail>img { 
 
\t \t max-width: 150%; 
 
\t \t height: auto; 
 
\t \t position: relative; 
 
\t \t margin: auto; 
 
\t } 
 

 
} 
 
@media (min-width: 400px) and (max-width: 600px) { 
 
\t .img-responsive, .thumbnail a>img, .thumbnail>img { 
 
\t \t max-width: 250%; 
 
\t } 
 
} 
 
@media (max-width: 400px) { \t 
 
\t .img-responsive, .thumbnail a>img, .thumbnail>img { 
 
\t \t max-width: 300%; 
 
\t \t height: auto; 
 
\t \t position: relative; 
 
\t \t margin: auto; 
 
\t } 
 
@media (max-width: 300px) { \t 
 
\t 
 
\t .img-responsive, .thumbnail a>img, .thumbnail>img { 
 
\t \t max-width: 400%; 
 
\t } 
 
} 
 
\t 
 

 
} 
 

 
@media (min-width: 768px) { 
 
\t .navbar-fixed-bottom { display: none;} 
 
\t 
 
} 
 

 
@media (min-width:768px){ 
 
\t .form__consolidado__color { 
 
\t \t margin-top: 120px; 
 
\t \t position: absolute; 
 
\t \t margin-left: 20px; 
 
\t \t box-shadow: 0 0 6px 0px black; 
 
\t } 
 
\t 
 
\t 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 slider__size"> 
 
     <div class="slider__consolidado__img__position"> \t 
 
     <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>

來源

2017-07-19 Tainara Freitas

歡迎的StackOverflow，你的問題應該包含[**最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve）。 – hungerstar

形式下，其他的div存在的問題，可以通過設置來解決在「Z-指數」包含的形式向高價值的div屬性，它可以使表單出現在第一級

z-index: 100 

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

來源

2017-07-19 19:36:27

非常感謝！有效！！我不能漂浮在右側。你知道我能做到嗎？ 'float：right;'不起作用，既沒有邊距， –

你能給我一個鏈接到你部署的項目，所以我可以檢查和解決這個問題，因爲我找不到你的描述中的錯誤 –

我希望Amr，但我無法設置服務器，然後我決定完成前端，因爲它讓我花了很多時間沒有任何進展。如果你有任何想法，我可以設置我的網頁，因爲其他人可以看到鏈接，這將是很好的。非常感謝你 –

我解決了浮動問題margin-left:45%;

來源

2017-07-26 16:04:33

事業部是在其他的div

回答

相關問題