Вынести элемент на передний план с помощью CSS
Я не могу понять, как вывести изображения на первый план CSS . Я уже пробовал установить z-index на 1000 и положение относительно, но все равно не удалось.
#header < background: url(http://placehold.it/420x160) center top no-repeat; > #header-inner < background: url(http://placekitten.com/150/200) right top no-repeat; > .logo-class < height: 128px; > .content < margin-left: auto; margin-right: auto; table-layout: fixed; border-collapse: collapse; > .td-main < text-align: center; padding: 80px 10px 80px 10px; border: 1px solid #A02422; background: #ABABAB; >body> div id="header"> div id="header-inner"> table class="content"> col width="400px" /> tr> td> table class="content"> col width="400px" /> tr> td> div class="logo-class"> div> td> tr> tr> td id="menu"> td> tr> table> table class="content"> col width="120px" /> col width="160px" /> col width="120px" /> tr> td class="td-main">text td> td class="td-main">text td> td class="td-main">text td> tr> table> td> tr> table> div> div> body>html \ css как поместить фоновое изображение на передний план? поверх остальных элементов
Суть такова: Есть блок с текстом, в котором есть картинка как фоновое изображение. Я хочу чтобы эта картинка (как фон) была на первом плане, и выходила за рамки самого блока (как часто есть в примерах, где якобы изображение выходит за рамки блока) .
Так вот и вопрос, как это сделать?
Потому что, если ставлю обычный и добавляю position:relative и сдвиг в верх.. . то снизу остается пустое место, которое мешает.. .
Было бы идеально чтобы его задать как becground-image, но как его вытащить на передний фон, и чтобы оно выходило за рамки блока .
Кто подскажет? поможет?
вот на этой картинке (наглядно).. .
есть блок 1, под ним блок 2 и в нем фоновое изображение 3.
и я хочу чтобы это изображение было поверх блоков 2 и 1, и чтобы было на первом плане.
Придумал решение:
сделал самым первым
img position:relative,
а уже после него 2 div блока, которые бы находились на месте «сдвинутой картинки».
И таким образом, и пустое место занято.. . и картинка сдвинута))))
Отдельный блок для него сделай и балуйся ним как душе угодно.
И в чем тайный смысл закрывать текст изображением?
может ты не так понял мою идею. я добавил изображение, что я хочу.
(красным, квадрат №3 — это фоновое изображение. (или как картинка), его хочу поставить поверх всех двух блоков. (но если добавляю position relative в теге img то оно оставляет снизу свое место (при смещении) что не подходит.
вот и вопрос.
Дельфийский Оракул (95939) Я совсем не понял идею и зачем закрывать текст изображением. но ты можешь создать отдельный блок нужного размера, присвоить ему фоновое изображение и дать атрибуты: position:absolute; z-index:10; а потом двигай его куда хочешь с помощью left и top
Вот примерчик. тут вроде картинка#images
только из недостатков — что relative оставляет за собой пустое место при здвиге. И оно не совсем красиво получается. если бы еще это пустое место убрать? было бы именно то что я и ищу
все из металла Знаток (364) Погугли типо позиционирование картинок,плавающие элементы,обсолютное и относительное позиционирование блоков div,я бы написал тебе конкретно пример мля забыл просто
с помощью css. Прописываешь в стилях этого элемента
#этот элемент < z-index: 999999;>(но это если уж совсем поверх всего:)
Посмотрите на свойство z-index. Оно позиционирует элемент относительно остальных. Т. е вы можете создавать слои и перемещать их, изменяя значения свойства.
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
На первом плане css
Относительно чего позиционируем?
Чтобы спозиционировать себя, элемент должен знать две вещи:
- какой родитель станет точкой отсчета;
- величину смещения относительно точки отсчета (сверху, снизу, справа или слева).
Если определить position: absolute для box-4 , этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).
Теперь добавим свойства top: 0 и left: 0 . Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative ). box-4 начинает поочередно опрашивать своих предков. Ни box-3 , ни box-2 , ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию ( unset ).
Если позиционированный предок не нашелся, элемент размещается относительно тела документа ( body ):
Если установить position: relative для элемента box-1 , точкой отсчета станет он:
Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.
Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.
Если установить position: relative также для box-2 , то box-4 будет позиционироваться относительно него, ведь этот предок ближе.
Аналогично и для контейнера box-3 :
А вот и наглядный красивый CSS-пример поиска позиционированного предка: