Z-индекс для размещения водяного знака над изображением, но под текстом не работает
Я хотел бы, чтобы мой текстовый водяной знак был виден над изображениями, но под текстом страницы, чтобы текст страницы оставался читаемым.
Я пробовал разные комбинации, но безрезультатно. Например, я не понимаю, почему установка водяного знака на z-index = -1 ставит его под текст, но когда я устанавливаю изображение на z-index = -2 (или -100), он не отображает то, что я хочу.
Я также попытался установить водяной знак на z-index=1, который отображается над изображением, а затем установить [p] z-index=100, чтобы текст не помещался над водяным знаком.
Предполагая, что для текста лучше всего оставить значение по умолчанию (без настройки, чтобы принять 0), тогда, установив z-index = -1 для водяного знака и z-index = -2 для изображения, теоретически он должен отображаться как нужно.
Но эта теория не работает.
(фиксированное позиционирование не используется)
Ответы 1
z-index работает только тогда, когда указано свойство position. У вас может быть уже определено «положение» для водяного знака, но вам также необходимо указать «положение» для текста. Например:
p {
position: relative;
z-index: 10;
}
Или, если нет тега "p", укажите позицию для изображения. Установив для водяного знака значение z-index="-1", он будет располагаться под текстом. Затем установите положение для изображения:
img {
position: relative;
z-index: -2;
}
Добавление позиции для тега IMG сработало лучше всего для меня, спасибо.