2010-11-30 4 views
11

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

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

ответ

24

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

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

<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 актов как источник для абсолютно расположенных элементов внутри него, так что текст помещается поверх изображения, а не в верхнем левом углу страницы.

0

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

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

+0

Я не могу сделать это фон, потому что это изображение. Я посмотрю на этот сайт, спасибо за ссылку. – user494216 2010-11-30 19:12:22

0

Попробуйте 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> 
Смежные вопросы