div를 다른 div 위에 배치하는 방법은 무엇입니까?

Question

내 코드는 다음과 같습니다

HTML :

<section> 
    <div id="banner"> 
     <div class="container"> 
      <p class="para">hello world</p> 
     </div> 
     <div class="container banner-bottom"> 
      <div class="card card-primary text-center z-depth-2 contact-main-text"> 
       <div class="card-block"> 
        <p class="white-text">Please fill out the form below and ESC 
staff will be in contact with you shortly.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS : Bootply
그리고 내가 원하는 :

.para{ 
    color:white; 
    background: red; 
    padding:70px; 
    text-align:center;} 

    .white-text{ 
     background:green; 
     padding:20px;} 

출력이

아무도 도와 줄 수 있습니까?

Answer 1

위치의 비트는 도움이 여기에 희망 당신은 당신이해야 할 일을 생각 얻을 것이다 거친 버전입니다 :

#banner { position:relative;} 
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; } 

을 heres는 bootply 포크 : 경우 http://www.bootply.com/Imuh4wUj50

Answer 2

당신은 라이브 예를 들어, 두 번째 DIV 오버레이보고 부정적인 상단 여백을 설정할 수 있습니다

<div class="container banner-bottom" style="margin-top:-5%;padding:2%"> 

http://www.bootply.com/MorC45NB4V

PS : 난 그냥 보여 인라인 CSS를 방지하기 위해 인라인 CSS를 사용했다.

Answer 3

1) 하단 배너가 전체 너비를 갖기를 원합니다.

위치 : 상대 값 : 을 추가 할 수 있습니다. 하단 배너에을 입력하고 하단 값을 추가하고 여백을 사용하여 질문에서 제기 된 것과 동일한 시각 효과를 만듭니다.

.banner-bottom { 
    position: relative; 
    bottom: 45px; 
    margin: 0 40px; 
} 

2) 혹시 다음, 여백을 사용할 필요가 전체 폭 배너가 없으며 단지를 중심으로 할 필요가 없습니다. 하나의 부모를 위치로 설정하는 것을 잊지 마십시오. relative : :

#banner { position:relative;} 

.banner-bottom { 
    position: absolute; 
    top:75%; 
    right:0; 
    bottom:auto; 
    left:0; 
} 

CODEPEN는는

http://codepen.io/alexincarnati/pen/PWOPjY

Answer 4

내 솔루션 jQuery를 몇 가지 계산을 사용합니다. 내 계산은 문서 주위의 요소를 이동하더라도 작동합니다. 나는 또한 원하는 여백에 CSS를 사용했다.

jQuery를

//location of bottom of the red container 
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height(); 
//gets the bottom 4th of the red container 
var placement = bottomOfContainer - ($('#onTopOfMe').height()/4); 
//setter of top for green container 
$('#placeMe').offset({"top": placement}); 

CSS

p.white-text{ 
    margin-left:5%; 
    margin-right:5%; 
} 

출력

bootply

Answer 5

여기 내 solution입니다.

기본적으로 카드 블록의 위치를 ​​"상대적"으로 만들고 그에 따라 "상단"위치를 지정한 다음 여백을 "자동"으로 설정하여 중앙에 맞 춥니 다.

.card-block { 
    position: relative; 
    top: -50px; 
    margin: auto; 
    width: 80%; 
}