How can I put a div over an image?
I am trying to put a div over an image so that it acts like a caption, directly ontop of the image.
Sometimes the caption is longer than other times so I can’t set a specific margin-top:-px because sometimes the height of the caption is longer.
I tried this and the background of the link (black) does not show, also like I just stated, the caption height changes so this method is garbage:
5 Answers 5
Try something like this:
You had a few things going on:
1) You had a div inside an ‘a’ tag. You shouldn’t put block level elements (like divs) inside inline level elements (like a’s).
2) Remove the float from the image, set your outer div’s position to relative and your inner div’s position to absolute, then absolutely position it to the top of the containing div. From there, add a z-index greater than 0 to the inner div for good measure, to ensure it stays stacked above the image.
Как я могу поместить div поверх изображения?
Я пытаюсь поместить div поверх изображения, чтобы он действовал как заголовок, прямо поверх изображения.
иногда заголовок длиннее, чем в других случаях, поэтому я не могу установить определенный margin-top:-px, потому что иногда высота заголовка длиннее.
Я пробовал это, и фон ссылки (черный) не показывает, также, как я только что сказал, высота заголовка изменяется, поэтому этот метод является мусором:
5 ответов
попробуйте что-то вроде этого:
У Вас было несколько вещей происходит:
1) у вас был div внутри тега «a». Вы не должны помещать элементы уровня блока (например, divs) внутри встроенных элементов уровня (например, a).
2) Удалите поплавок из изображения, установите положение внешнего div в относительное и положение внутреннего div в абсолютное, а затем абсолютно расположите его в верхней части содержащего div. Оттуда добавьте Z-индекс больше 0 во внутренний div навсегда мера, чтобы убедиться, что он остается сложенным над изображением.
добавить position:absolute; left:0px;top:0px;z-index: 2; в текущий div и добавить style=»position:relative;» в Родительском div
используйте свойство CSS z-index для выравнивания текста над изображением. Элемент с более высоким индексом z отображается вверху.
Как создать эффект наложения с помощью CSS
Есть несколько способов создания наложений. В этой статье мы покажем, как создать наложение с помощью CSS свойств.
Один из способов создания такого эффекта является абсолютное позиционирование HTML элемента на странице. Необходимо в разметке создать div, потом абсолютно позиционировать его с помощью свойства position, и дальше с помощью свойства z-index задать для div высокий z-index, чтобы он находился поверх всех остальных элементов страницы. Мы зададим более высокий z-index для следующего элемента div, которое откроется сверху наложения.
- Создайте два элемента div с классами «overlay» и «modal».
- Добавьте стиль к классу «overlay».
Для position задайте значение absolute, а z-index установите в 10.
- Добавьте стиль к «modal».
Здесь мы устанавливаем свойство position в fixed а z-index в 11, на 1px выше, чем слой наложения.
- Also, set style the body.
Мы устанавливаем position в значение relative.
И так, мы создали наложение. Давайте посмотрим результат!
Пример
Мы также можем создать наложение при помощи селекторов ::before и ::after.
Стили и решения этого метода во многом похожи на предыдущий. Только здесь необходимо добавить стиль к псевдоклассам ::before и ::after .
