Как вывести текст кнопки на передний план CSS
Добавьте позицию отличную от static , z-index работает только для позиционированных элементов:
#text
Позиция relative это наиболее безопасное решение если Вы не хотите что бы элемент выбился из своего естественного flow.
Отслеживать
ответ дан 15 июл 2020 в 18:38
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
Благодарю! Не знал про эту особенность z-index
15 июл 2020 в 19:09
Создайте контейнер relative и внутри него сразу помещайте текст и элементы absolute. Для контейнера задайте z-index: 0, а для элементов absolute задайте z-index: -1
.wrap < position: relative; display: flex; align-items: center; justify-content: space-around; width: 50%; height: 150px; background: red; font-size: 50px; color: #fff; margin: 0 auto; z-index: 0; >.absolute
Отслеживать
ответ дан 15 июл 2020 в 19:08
Kirill Batkov Kirill Batkov
11 2 2 бронзовых знака
- html
- css
- button
- hover
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Наложение элементов — CSS: Позиционирование элементов
В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга. Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства z-index . Из названия свойства можно увидеть, что речь идет об оси z .
Эта ось отвечает за то, какие элементы будут располагаться на переднем, а какие на дальнем плане. Попробуем использовать на трех блоках абсолютное позиционирование:
Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three . Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one , после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «заслонив» своих братьев.
При таком взаимодействии блоки никуда не исчезают из кода, это можно проверить, выставив разные свойства ширины и высоты для каждого из блоков:
Свойство z-index позволяет указать, какие элементы и в каком порядке будут накладываться друг на друга. Свойство принимает числовое значение, указывая слой, на котором будет расположен элемент. Чем больше число, тем выше элемент находится по оси z . Важно, что свойство z-index работает только с элементами, у которых установлено свойство position с одним из значений:
Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:
- Первым всегда идет элемент HTML. Поверх него накладываются все остальные элементы.
- Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
- В конце накладываются все элементы с position в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.
Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two установить значение z-index больше, чем у блока .block-three . В результате третий блок «исчезнет», так как имеет меньшие размеры:
Свойство z-index может принимать отрицательные, положительные значения и ноль. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения z-index с шагом в 100 при достаточно больших значениях. Это делается для удобства чтения и правок стилей:
z-index: 34234; z-index: 43233; z-index: 34324; Определить, в каком порядке расположатся элементы, при таких значениях достаточно трудно. Необходимо вчитываться в каждую цифру. Сравните это с таким вариантом:
z-index: 34200; z-index: 43200; z-index: 34300; Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
html \ css как поместить фоновое изображение на передний план? поверх остальных элементов
Суть такова: Есть блок с текстом, в котором есть картинка как фоновое изображение. Я хочу чтобы эта картинка (как фон) была на первом плане, и выходила за рамки самого блока (как часто есть в примерах, где якобы изображение выходит за рамки блока) .
Так вот и вопрос, как это сделать?
Потому что, если ставлю обычный и добавляю position:relative и сдвиг в верх.. . то снизу остается пустое место, которое мешает.. .
Было бы идеально чтобы его задать как becground-image, но как его вытащить на передний фон, и чтобы оно выходило за рамки блока .
Кто подскажет? поможет?
Дополнен 10 лет назад
вот на этой картинке (наглядно).. .
есть блок 1, под ним блок 2 и в нем фоновое изображение 3.
и я хочу чтобы это изображение было поверх блоков 2 и 1, и чтобы было на первом плане.
Дополнен 10 лет назад
Придумал решение:
сделал самым первым
img position:relative,
а уже после него 2 div блока, которые бы находились на месте «сдвинутой картинки».
И таким образом, и пустое место занято.. . и картинка сдвинута))))
Лучший ответ
Отдельный блок для него сделай и балуйся ним как душе угодно.
И в чем тайный смысл закрывать текст изображением?
szetМастер (1024) 10 лет назад
может ты не так понял мою идею. я добавил изображение, что я хочу.
(красным, квадрат №3 — это фоновое изображение. (или как картинка), его хочу поставить поверх всех двух блоков. (но если добавляю position relative в теге img то оно оставляет снизу свое место (при смещении) что не подходит.
вот и вопрос.
Дельфийский Оракул (96061) Я совсем не понял идею и зачем закрывать текст изображением. но ты можешь создать отдельный блок нужного размера, присвоить ему фоновое изображение и дать атрибуты: position:absolute; z-index:10; а потом двигай его куда хочешь с помощью left и top
Остальные ответы
Вот примерчик. тут вроде картинка#images
Это подходит (я уже пробовал).
только из недостатков — что relative оставляет за собой пустое место при здвиге. И оно не совсем красиво получается. если бы еще это пустое место убрать? было бы именно то что я и ищу
все из металла Знаток (378) Погугли типо позиционирование картинок,плавающие элементы,обсолютное и относительное позиционирование блоков div,я бы написал тебе конкретно пример мля забыл просто
Создай отдельный блок для картинки, задай позицию ему как тебе угодно.
с помощью css. Прописываешь в стилях этого элемента
#этот элемент < z-index: 999999;>(но это если уж совсем поверх всего:)
szetМастер (1024) 10 лет назад
пробовал, не сработало
Артём Буймов Профи (953) проверь, мб ты не к этому элементу прописал
Посмотрите на свойство z-index. Оно позиционирует элемент относительно остальных. Т. е вы можете создавать слои и перемещать их, изменяя значения свойства.
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
z-index
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index . Это свойство работает только для элементов, у которых значение position задано как absolute , fixed или relative .
Синтаксис
z-index: число | auto | inherit
Значения
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index , на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index , но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.
Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
z-index #layer1, #layer2, #layer3, #layer4 < position: relative; /* Относительное позиционирование */ >#layer1, #layer3 < font-size: 50px; /* Размер шрифта в пикселах */ color: #000080; /* Синий цвет текста */ >#layer2, #layer4 < top: -55px; /* Сдвигаем текст вверх */ left: 5px; /* Сдвигаем текст вправо */ color: #ffa500; /* Оранжевый цвет текста */ font-size:70px; /* Размер шрифта в пикселах */ >#layer1 < z-index: 2; >#layer2 < z-index: 1; >#layer3 < z-index: 3; >#layer4 Слой 1 наверху
Слой 4 наверху
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства z-index
Объектная модель
[window.]document.getElementById(» elementID «).style.zIndex
Браузеры
Список, созданный с помощью тега , в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.
В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.