Как выровнять изображение на дне другого изображения?

Question

Как выровнять изображение енотова, чтобы он появился в правом нижнем углу большого круглого изображения? Как на изображении.

Я попробовал background-position: внизу справа; а также положение: абсолютное; но это не сработает.

См. Приведенный ниже код.

Thank you.

.p-i--1 { 
 
    background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg); 
 
} 
 
.p-i { 
 
    border-radius: 50%; 
 
    background-position: bottom right; 
 
    width: 40px; 
 
    height: 40px; 
 
    position: absolute; 
 
} 
 
.p-1 { 
 
    float: left; 
 
    width: 220px; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.p-wrap { 
 
    bottom: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.pic-wrap { 
 
    width: 122px; 
 
    height: 122px; 
 
    margin: 0 auto; 
 
} 
 
.p_pic-1 { 
 
    background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122); 
 
    background-position: center; 
 
    float: left; 
 
    width: 122px; 
 
    height: 122px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
} 
 
.p-description { 
 
    font-family: Roboto; 
 
    font-weight: 300; 
 
    color: #666; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    float: left; 
 
    margin-top: 0; 
 
} 
 
.p-name { 
 
    text-align: center; 
 
}

<div class="p-1"> 
 
    <div class="p-i--1 p-i"></div> 
 
    <div class="pic-wrap"> 
 
    <a class="p_pic-1" href="index.html"></a> 
 
    </div> 
 
    <div class="p_wrap"> 
 
    <h4 class="p-name">Some text</h4> 
 
    <p class="p-description">Some very very very very long description</p> 
 
    </div> 
 
</div>

Answer 1

Положите меньшую картинку в .pic-wrap. Дайте ему absolute положение и выровнять его с помощью bottom и right свойства: Изменения

JS Fiddle

CSS сделаны:

.pic-wrap { 
    position: relative; 
} 
.p-i { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

И если вы хотите белую рамку вокруг небольшого изображения:

.p-i { 
    border: 3px solid white; 
} 

JS Fiddle

Answer 2

Просто добавьте bottom и right свойство вашего абсолютного элемента, как это:

.p-i { 
    border-radius: 50%; 
    background-position: bottom right; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    bottom: 100px; 
    right: 50px; 
} 

Вот отрывок с вышеприведенными кодами:

.p-i--1 { 
 
    background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg); 
 
} 
 
.p-i { 
 
    border-radius: 50%; 
 
    background-position: bottom right; 
 
    width: 40px; 
 
    height: 40px; 
 
    position: absolute; 
 
    bottom: 100px; 
 
    right: 50px; 
 
} 
 
.p-1 { 
 
    float: left; 
 
    width: 220px; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.p-wrap { 
 
    bottom: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.pic-wrap { 
 
    width: 122px; 
 
    height: 122px; 
 
    margin: 0 auto; 
 
} 
 
.p_pic-1 { 
 
    background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122); 
 
    background-position: center; 
 
    float: left; 
 
    width: 122px; 
 
    height: 122px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
} 
 
.p-description { 
 
    font-family: Roboto; 
 
    font-weight: 300; 
 
    color: #666; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    float: left; 
 
    margin-top: 0; 
 
} 
 
.p-name { 
 
    text-align: center; 
 
}

<div class="p-1"> 
 
    <div class="p-i--1 p-i"></div> 
 
    <div class="pic-wrap"> 
 
    <a class="p_pic-1" href="index.html"></a> 
 
    </div> 
 
    <div class="p_wrap"> 
 
    <h4 class="p-name">Some text</h4> 
 
    <p class="p-description">Some very very very very long description</p> 
 
    </div> 
 
</div>

Answer 3

Вот скрипку: https://jsfiddle.net/6sxLj3hL/ Ваша твердая кодированная высота на контейнере не была необходимой, поэтому я удалил ее.

.p-i--1 { 
    background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg); 
} 
.p-i { 
    border-radius: 50%; 
    background-position: bottom right; 
    width: 40px; 
    height: 40px; 
    float:right 

} 
.p-1 { 
    float: left; 
    width: 220px; 
    height: 100%; 
    position: relative; 
} 
.p-wrap { 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
} 
.pic-wrap { 
    width: 122px; 
    margin: 0 auto; 
    overflow: auto; 
} 
.p_pic-1 { 
    background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122); 
    background-position: center; 
    width: 122px; 
    height: 122px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    display: block; 
    overflow: auto; 
} 
.p-description { 
    font-family: Roboto; 
    font-weight: 300; 
    color: #666; 
    font-size: 14px; 
    text-align: center; 
    float: left; 
    margin-top: 0; 
} 
.p-name { 
    text-align: center; 
} 

я переставить свой HTML немного

<div class="p-1"> 
    <div class="pic-wrap"> 
     <a class="p_pic-1" href="index.html"></a> 
     <div class="p-i--1 p-i"></div> 
    </div> 
    <div class="p_wrap"> 
     <h4 class="p-name">Some text</h4> 
     <p class="p-description"> 
      Some very very very very long description 
     </p> 
    </div> 
</div>