Как поместить изображения поверх других полей?

Question

Как я могу поместить картинку поверх всех других DIV-блоков и правильно расположить ее, как маленькие гиты на картинке?

Изображение с изображением на изображении

Answer 1

Вы можете установить положение изображения на относительно и pu sh вниз, чтобы создать перекрытие.

Например;

#container {
background-color: red;
}

#image {
position: relative;
top: 30px;
}

#text {
background-color: green;
}

<div id="container">

<div id="image">
<img src="https://picsum.photos/100/100">
</div>

<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

Как видно из моего примера, изображение перекрывает текстовое поле.

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

Если у вас есть несколько изображений в одной строке, возможно, вы могли бы рассмотреть возможность установки #container в качестве родителя , а затем все изображения и текст в качестве детей .

Answer 2

Есть несколько вещей, которые вам нужно использовать:

• CSS Позиционирование , вам нужно будет либо установить absolute, либо relative позиционирование для достижения этой цели. относительное позиционирование позиционирует элемент относительно его родителя - тогда как абсолютное позиционирование позиционирует элемент в точно указанном месте на странице
• CSS Z-indexing , вам нужно убедиться, что элемент image имеет более высокий z-index , чем элемент, над которым вы пытаетесь расположить его.

Еще одна вещь, на которую следует обратить внимание, это то, что z-index влияет только на элементы, которые имеют позицию, отличную от static, поэтому, если у вас возникают проблемы, убедитесь, что элементы имеют нестатическое значение c позиция установлена.

Вот несколько ссылок:

Z-индекс: https://css-tricks.com/almanac/properties/z/z-index/

Позиция: https://css-tricks.com/almanac/properties/p/position/

Answer 3

Попробуйте изменить z-порядок каждого изображения.