divタグのボタンをCSSを使ってオーバーラップする

Question

こんにちは、divタグと2つのボタンが重なり合っていることについての簡単な質問はどうすればいいですか？私はポジションとマージンを試しましたが、どちらもボタンを移動しません。

相続人のhtml：

<div class="container-fluid"> 
    <div style="margin:auto;"> 
     <button type="submit" class="btn-login">Log in</button> 
    </div> 
    <div class="signup-form"> 
    <label style="text-align:center;margin-bottom:20px">Create an Account</label> 

    <div> 
     <button type="submit" class="btn-login">Sign Up Free</button> 
    </div> 
     <label style="text-align:center;margin-bottom:20px;margin-top:20px">or</label> 
    </div> 
</div> 
    <div class="social_media"> 
     <button type="submit" class="btn-facebook"></button> 
     <button type="submit" class="btn-gmail"></button> 
    </div> 
</body> 

はHERESにCSS：

.signup-form { 
    top:-40px; 
    position:relative; 
    box-sizing: border-box; 
    margin: 25px auto; 
    margin-bottom:0px; 
    width: 100%; 
    max-width:400px; 
    background-color: white; 
    padding: 50px 50px 50px 50px; 
    box-shadow: 1px 5px 2px #330000; 
    z-index: -1; 
} 

.social_media { 
    text-align:center; 
} 

.btn-facebook { 
    margin-bottom:60px; 
    padding-left:30px; 
    background-image: url(fb.gif); 
    background-color: #3b5998; 
    padding: 0px; 
    border: 3px solid white; 
    border-radius: 5px; 
    box-shadow: 1px 2px 2px grey; 
    background-size: contain; 
    background-repeat: no-repeat; 
    height: 70px; 
    width: 70px; 
    font-family: sans-serif; 
    font-size: 16px; 
    color: white; 
} 

.btn-gmail { 
    margin-bottom:60px; 
    top:50%; 
    padding-right:30px; 
    background-image: url(g+.gif); 
    background-color: #dc4a38; 
    padding: 0px; 
    border: 3px solid white; 
    border-radius: 5px; 
    box-shadow: 1px 2px 2px grey; 
    background-size: contain; 
    background-repeat: no-repeat; 
    height: 70px; 
    width: 70px; 
    font-family: sans-serif; 
    font-size: 16px; 
    color: white; 
} 

また、最初のスクリーンショットは、それが今のように見えるものであり、第二は、複製しようとして何イムにフォトショップの画像からです

Answer 1

位置：絶対;

また、zインデックスも変更する必要がある場合があります。

Answer 2

social_mediaの位置をrelativeに設定し、必要に応じてtopプロパティを使用して移動します。例えば：relativeに親のための位置property value（オーバーラップを制御する）とbutton DIVabsoluteのことを設定

.social_media { 
    text-align:center; 
    position: relative; 
    top: -74px; 
} 

jsFiddle example

Answer 3

。今すぐボタンをbutton DIVの中に置き、left、right、topまたはbottomにはnegative valuesを使用して、button DIVの位置に配置します。

.parent { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 0 auto; 
 
    background: red; 
 
    position: relative; 
 
} 
 

 
.button { 
 
    width: 100px; 
 
    height: 45px; 
 
    line-height: 45px; 
 
    text-align: center; 
 
    position: absolute; 
 
    background: darkOrange; 
 
    border-radius: 5px; 
 
    bottom: -22.5px; 
 
    left: 50%; 
 
-webkit-transform: translateX(-50%); 
 
transform: translateX(-50%) 
 
}

<div class="parent"> 
 

 
<div class="button"> 
 

 
    <input type="button" value="my button" /> 
 
    
 
</div> 
 

 
<div>