レスポンシブデザインのdiv内にdivを配置

Question

回答デザインでanoter div（プロファイルバナー）内にdiv（プロフィール画像）を配置したいと考えています。本当に問題ではありませんが、私はまた、内側のdiv（プロフィール画像）を外側のdivの外側に少ししたいと思います。それは単にPC上でこのように表示する必要があり、それは携帯電話とタブレットで異なって表示することができます。作成しようとして何イムの

HERESに絵：

それでは、私が欲しいのは、わずかに外側に、内側のdivを持つdivの内側の応答div要素です。それは、異なる画面解像度のために応答しなければならない。

私は、これは、リクエストの答えの詳細ですけど、私はどのようにこの

Answer 1

Codepenデモ行うに見当もつかない：

http://codepen.io/anon/pen/dpgXqp

を

* { 
 
    transition: .5s all ease-in-out; 
 
    -webkit-transition: .5s all ease-in-out; 
 
    -moz-transition: .5s all ease-in-out; 
 
    -ms-transition: .5s all ease-in-out; 
 
    -o-transition: .5s all ease-in-out; 
 
} 
 
.propic { 
 
    border: 2px solid #e2e2e2; 
 
    margin-top: -130px; 
 
    margin-left: 70px; 
 
} 
 
.cover { 
 
    border: 2px solid #e2e2e2; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
} 
 
.propic:hover, 
 
.cover:hover { 
 
    box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -webkit-box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -moz-box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -ms-box-shadow: 0 0 10px 10px #9f9f9f; 
 
    -o-box-shadow: 0 0 10px 10px #9f9f9f; 
 
}

<img src="http://4.bp.blogspot.com/-2UPJD5hegLs/UR4MlzkGTUI/AAAAAAAAAWk/xpff536gpIQ/s1600/mycover.jpg" alt="Cover_Photo" class="cover" /> 
 
<br /> 
 
<img src="http://4.bp.blogspot.com/-b3Ty2n3mrOc/UR4MAXUXHDI/AAAAAAAAAWQ/CS31CdrnNY8/s1600/profp.jpg" class="propic" alt="Profile_picture" />

Codepenリンク：

http://codepen.io/anon/pen/dpgXqp

Answer 2

.parent{ 
 
    width: 400px; 
 
    height:200px; 
 
    background-color:red; 
 
} 
 
.sibling{ 
 
position: absolute; 
 
    left: 100px; 
 
    top: 150px; 
 
    width:300px; 
 
    height:200px; 
 
    background-color: green; 
 
}

<div class="parent"> 
 
    
 
</div> 
 
<div class="sibling"> 
 
    </div>

Answer 3

あなたは外のdivのために、内側のdivのためposition:absolute;とposition:relative;を使用する必要があります。また、テキストを親ボックス内のプロファイル画像の後ろに配置する場合は、親ボックスに余白を残す必要があります。 DEMO

.user-info{ 
 
    background:#444; 
 
    position:relative; 
 
    width:100%; 
 
    height:200px; 
 
    box-sizing:border-box; 
 
    padding:16px 16px 16px 216px; 
 
    color:#FFF; 
 
    font-size:32px; 
 
    } 
 
    .profile-picture{ 
 
    background:#444; 
 
    width:150px; 
 
    height:150px; 
 
    position:absolute; 
 
    border:2px solid #FFF; 
 
    left:50px; 
 
    bottom:-50px; 
 
    color:#FFF; 
 
    text-align:center; 
 
    }

<div class="user-info"> 
 
    <div class="profile-picture">Profile Picture</div> 
 
    
 
    User Information 
 
</div>

また、あなたが応答を処理したい場合は、メディアクエリ（それを見るためにサイズを変更）を使用することができます：あなたは絶対位置を使用することができますDEMO