Создание DIV контейнера «Перекрытие» DIV

Question

Я пытаюсь сделать страницу, похожую на эту:

Я пытаюсь сделать фотографию ДИВ идти «ниже» обоев дел. Вот мой relavent код:

код CSS:

.profile-picture { 
    display: inline-block; 
    margin-left: 10px; 
    width: 150px; 
    height: 150px; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../Images/profiles/default.png") 
} 

.wallpaper { 
    width: 100%; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../images/Wallpapers/default.png") 
} 

HTML код:

<div class="col-md-6 roundedCorners" style="background-color: white"> 
    <div class="wallpaper"> 
     <div class="row"> 
      <div class="col-md-6" style="text-align: left"> 
       <div class="profile-picture"> 
        &nbsp; 
       </div> 
      </div> 
      <div class="col-md-6"> 

      </div> 
     </div> 
    </div> 
</div> 

Сейчас все работает, за исключением ввода его закругленный профиль изображение центрируется по вертикали в пределах изображение. Я хотел бы, чтобы он плавал за пределами обоев, как показано на изображении выше. Что мне не хватает?

Answer 1

В настоящее время ваш код не содержит никаких positioning стилей.

Вы, скорее всего, захотите использовать position: absolute для изображения профиля (с bottom и left, чтобы установить позицию). Когда вы это сделаете, вы также захотите добавить position: relative к обоям, чтобы абсолютное позиционирование было по отношению к обоям.

Вот измененный код, который позволит вам начать работу в правильном направлении:

.profile-picture { 
    /* set the position to absolute */ 
    position: absolute; 
    /* set the bottom to be slightly outside the wallpaper boundary. Adjust this number as desired */ 
    bottom: -50px; 
    /* set the left where desired. Note I removed your margin-left, since you don't need both left and margin-left */ 
    left: 10px; 
    display: inline-block; 
    width: 150px; 
    height: 150px; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../Images/profiles/default.png") 
} 

.wallpaper { 
    /* set the position to relative, so the profile picture position is in relationship to the wallpaper container */ 
    position: relative; 
    /* you may (or may not) need this. The profile is outside the wallpaper, so would be considered "overflow". */ 
    overflow: visible; 
    width: 100%; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../images/Wallpapers/default.png") 
} 

Чтобы лучше понять, почему вы хотите, чтобы обои установить на position: relative и как это работает, проверить эту статью: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

Возможным решением могло бы стать расположение ваших элементов.

С position:relative; в вашем контейнере (.wallpaper) вы можете поместить свое изображение профиля в соответствие с контейнером, поэтому с помощью bottom: -70px; вы можете нажать его до нужного положения.

.profile-picture { 
 
    position: absolute; 
 
    bottom: -70px; 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    width: 150px; 
 
    height: 150px; 
 
    -ms-border-radius: 50%; 
 
    border-radius: 50%; 
 
    border: 5px solid white; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -ms-background-size: cover; 
 
    background-size: cover; 
 
    background-image: url(https://unsplash.it/150/150) 
 
} 
 
.wallpaper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 200px; 
 
    -ms-background-size: cover; 
 
    background-size: cover; 
 
    background-image: url(https://unsplash.it/2000/200) 
 
}

<div class="col-md-6 roundedCorners" style="background-color: white"> 
 
    <div class="wallpaper"> 
 
    <div class="row"> 
 
     <div class="col-md-6" style="text-align: left"> 
 
     <div class="profile-picture"> 
 
      &nbsp; 
 
     </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

В дополнение к другим ответам, вы можете поместить фотографию «ниже» обои с помощью z-index стиля. Добавьте к каждому классу следующее:

.profile-picture { 
    z-index:4; 
} 
.wallpaper { 
    z-index:5; 
}