Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Позиционирование слоя относительно картинки 
V
    Опции темы
maxipub
Дата 1.2.2012, 20:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 517
Регистрация: 22.10.2009

Репутация: нет
Всего: 1



Приветствую!

Товарищи, подскажите как на CSS можно поместить слой поверх картинки, например, в ее правом нижнем углу? Так подозреваю, что position: absolute;, но что дальше? margin-ами его можно сдвинуть, но это только если мы знаем размер картинки (это, в принципе, true) и размеры самого слоя (а в соем случае мы этого не знаем...).
PM MAIL   Вверх
maxipub
Дата 2.2.2012, 13:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 517
Регистрация: 22.10.2009

Репутация: нет
Всего: 1



Уточню немного вопрос.

Интересует или центрирование или - по правому краю.
PM MAIL   Вверх
$дмитрий
Дата 3.2.2012, 18:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45



Один из вариантов:
Поместить картинку в контейнер, контейру прописать display:table. Туда же див с position:absolute; right:0;
PM MAIL   Вверх
maxipub
Дата 4.2.2012, 15:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 517
Регистрация: 22.10.2009

Репутация: нет
Всего: 1



$дмитрий, отображаются у правого края окна браузера...

Единственное, что пока придумалось - сделать слой размерами с картинки, картинку - его бэкграундом, ну и далее уже твори что хочешь. Но что то мне этот вариант не очень симпатичен.
PM MAIL   Вверх
$дмитрий
Дата 4.2.2012, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45



Задача решается таким образом 

Код

<!DOCTYPE html>
<html>
    <body>
        <div style="display:inline-block; background:green; position:relative">
            <div style="position:absolute; width:100px; height:100px; background:red; right:0"></div>
            <img src="test.jpg" width="500" height="500">
        </div>
    </body>
</html>

PM MAIL   Вверх
maxipub
Дата 5.2.2012, 13:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 517
Регистрация: 22.10.2009

Репутация: нет
Всего: 1



$дмитрий, а ведь таки-да!

Огромное человеческое спасибо! smile 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.2554 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.