Поместить объект поверх изображения с помощью CSS?

Можно ли плавать объект над изображением с помощью css? Я хочу поместить форму поверх изображения (это не фон). Float не работает, но есть ли какая-то переменная, которая предоставляет эту функцию?

Когда вы плаваете объект, он перемещает текст по обе стороны объекта. То, что я ищу, - это то, что не будет делать этого, это будет просто плавать без учета того, что находится под ним.

Ответ 1

То, что вы ищете, - это не то, что делают плавающие элементы. Плавающий элемент по-прежнему является частью потока документов, и вам нужен элемент, который не является.

Используйте абсолютное позиционирование, чтобы вывести элемент из потока документа, таким образом он не будет удалять другие элементы, и вы можете поместить его поверх других элементов:

<div style="position:relative">    
  <img src="image.jpg" alt="" />
  <div style="position:absolute;left:0;top:0;">
    This text is on top of the image
  </div>
</div>

Элементы с position:relative действуют как начало для абсолютно расположенных элементов внутри него, поэтому текст помещается поверх изображения, а не в верхний левый угол страницы.

Ответ 2

Если вы делаете изображение под вопросом фоновым изображением для таблицы div или (да, я говорю это), используемой для форматирования формы, форма будет "плавать" над изображением.

Если этого недостаточно для ваших нужд, проверьте http://w3schools.com/css/css_positioning.asp

Ответ 3

Попробуйте z-index свойство

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>