Как вписывать div в div c картинками , чтобы все не ломалось?

Question

.container { 
    width: 300px; 
    height: 300px;
    border: solid 1px black; 
    display: table;
    overflow: hidden;
}
.column{
    width: 40%; 
    height: 40%;
    float: right;
    border: solid 1px black; 
    display: table-row;
    overflow: hidden;
}
.row{
    width: 40%; 
    height: 40%;
    float: right;
    border: solid 1px black; 
    display: table-column;
    overflow: hidden;
}
img{
    max-width: 100%;
    float: right;
    border: solid 1px black; 
    overflow: hidden;
}

<div class="container">
        <img src="http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v-igg2-1920x1080.jpg">
        <div class="row">
            <img src="http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v-igg2-1920x1080.jpg">
            <div class="column">
                <img src="http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v-igg2-1920x1080.jpg">
            </div>
        </div>
    </div>

Мне нужно, чтобы картинки были друг на друге. Без картинок все работает. Вот так:

Answer 1

для этого надо использовать свойство position: absolute и выставлять картинки относительно верхнего правого угла

position: absolute;
top: 0;
right: 0;

.block {
  position: relative;
  width: 300px;
  height: 300px;
}

.block img {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid red;
}

<div class = 'block'>
  <img src = 'https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-good-morning-hello-early-morning-background-design-morning-backgroundback-mountain-image_58024.jpg' width = 300px>
  <img src = 'https://images11.popmeh.ru/upload/img_cache/66b/66bed874ecc3694d6902d885c229b5d3_ce_415x415x502x0_cropped_800x800.jpeg' width = 100px>
  <img src = 'https://thumbs.dreamstime.com/b/%D0%B2%D0%B5-%D0%BE%D1%81%D0%B8%D0%BF%D0%B5-%D0%B8%D1%81%D1%82-%D0%B5%D1%85%D0%B0%D1%82%D1%8C-%D0%B2%D0%B5-%D0%BE%D1%81%D0%B8%D0%BF%D0%B5-42133874.jpg' width = 50px>
</div>

БЛОГ НА HUSL

Как вписывать div в div c картинками , чтобы все не ломалось?

Ответы (1 шт):