Встроенный блок отображения div с относительным положением

У меня есть серия изображений, каждая из которых имеет собственный оверлей. Как я могу их выровнять, как встроенные блоки? Я попробовал добавить display: inline-block; в .image-wrapper, но изображения всегда все расположены в верхнем левом углу div.container (вот jsfiddle).Встроенный блок отображения div с относительным положением

Вот HTML и CSS

.container { 
 
    position: relative; 
 
} 
 
.image-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.tweetty { 
 
    position: absolute; 
 
    overflow: auto; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image-vest { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #00f; 
 
    width: 220px; 
 
    height: 300px; 
 
    opacity: 0.4; 
 
    color: #fff; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-one</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-two</div> 
 
    </div> 
 

 
</div>

EDIT:

пересмотренная CSS с dfsq предложением удалить position:absolute; из .tweetty.

Цитирование dfsq комментарий: «Элементы с позиции абсолютного не вносят вклад в ширину и высоту их родительского контейнера Таким образом, изображение-обертка дивы просто разрушится, как если бы они были пусты, если все дети имеют position:absolute;.»

.container { 
 
    position: relative; 
 
} 
 
.image-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.tweetty { 
 
    overflow: auto; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image-vest { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #00f; 
 
    width: 220px; 
 
    height: 300px; 
 
    opacity: 0.4; 
 
    color: #fff; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-one</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-two</div> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-three</div> 
 
    </div> 
 
</div>

источник

2015-07-19 klode

Удалить 'положение: absolute' от' .tweetty'. – dfsq

@dfsq Спасибо, что это решение. Мое понимание заключалось в том, что каждый элемент 'position: relative' будет помещен внутри родителя' position: absolute' в соответствии с координатами 'top' и' left'. По-видимому, это верно для жилета, но не для tweetty. Что мне не хватает? – klode

@dfsq Приятный краткий ответ! В чем причина этого? Благодарю. – rapvelopment

Я повозился с скрипкой, и это похоже на работу. удалили все позиции из всех, кроме жилета. Используется режим отображения встроенного блока. Установите верхнюю границу до -300px, а также нижнюю границу, иначе вы получите пробел ниже изображений.

.container { 
 
/* position:relative;*/ 
 
} 
 
.image-wrapper { 
 
/* position: relative;*/ 
 
    display: inline-block; 
 
} 
 
.tweetty { 
 
/* position:absolute; 
 
    overflow:auto; 
 
    top:0; 
 
    left:0;*/ 
 
} 
 
.image-vest { 
 
    position:relative; 
 
    top:-300px; 
 
    margin-bottom: -300px; 
 
    left:0; 
 
    background-color:#00f; 
 
    width:220px; 
 
    height:300px; 
 
    opacity:0.4; 
 
    color:#fff; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-one</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-two</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-three</div> 
 
    </div> 
 
</div>

(вот JSFiddle версия)

источник

2015-07-19 20:55:15 Amit

Встроенный блок отображения div с относительным положением

ответ

Смежные вопросы