Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Текст поверх картинки
 
 автор: vovik_sumy   (25.10.2006 в 12:47)   письмо автору
 
 


<html>
<body>

Слой 2 наверху 
<div style="position:relative; font-size:50px; z-index:3; color: navy;background:red;">Слой 1</div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:4;background:black;">Слой 2</div> 
текст
</body>
</html>

Как сделать так, чтобы слово "текст"(т.е. слой2 когда ему дают новые координаты не оставлял за собой место) не писалось ниже слоя1 на высоту слоя 2. Думаю ясно о чём я? Может какое другое свойство нужно задать слою 2?
Нужно просто отпозиционировать слой2 над картинкой(она будет в слое1) и чтобы если я добавляю любой контент ниже, то он не должен смещаться на на высоту слоя 2..
Надеюсь ясно объяснил :-)

   
 
 автор: AlexSol   (25.10.2006 в 13:13)   письмо автору
 
   для: vovik_sumy   (25.10.2006 в 12:47)
 

абсолютно не ясно объяснил.

ну да ладно.

вариантов куча. если размер картинок одинаков везде, то можно так:

<hr>
текст текст текст текст текст текст текст текст
<div style="position:relative; width:100px; height:100px">
<img src="" width="100" height="100" border="3">
<div style=" z-index:5; position:absolute; bottom:5px; right:5px">текст 2</div>
</div>
текст текст текст текст текст текст текст текст


если разный то так:

<hr>
текст текст текст текст текст текст текст текст
<div style="position:relative; ">
<img src="" width="100" height="100" border="3">
<div style=" z-index:5; position:absolute; top:5px; left:5px">текст 2</div>
</div>
текст текст текст текст текст текст текст текст

   
 
 автор: SHAman   (25.10.2006 в 13:16)   письмо автору
 
   для: vovik_sumy   (25.10.2006 в 12:47)
 


position: absolute


для второго слоя примените.

   
 
 автор: vovik_sumy   (25.10.2006 в 13:46)   письмо автору
 
   для: SHAman   (25.10.2006 в 13:16)
 

Спасибо всем!
Просто прочитал в хелпе Влада Мержевича:

Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.


Значит всё таки ошибся)))

   
 
 автор: AlexSol   (25.10.2006 в 13:58)   письмо автору
 
   для: vovik_sumy   (25.10.2006 в 13:46)
 

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

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования