Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Позиционирование слоя относительно картинки

Автор: maxipub 1.2.2012, 20:40

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

Товарищи, подскажите как на CSS можно поместить слой поверх картинки, например, в ее правом нижнем углу? Так подозреваю, что position: absolute;, но что дальше? margin-ами его можно сдвинуть, но это только если мы знаем размер картинки (это, в принципе, true) и размеры самого слоя (а в соем случае мы этого не знаем...).

Автор: maxipub 2.2.2012, 13:49

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

Интересует или центрирование или - по правому краю.

Автор: $дмитрий 3.2.2012, 18:32

Один из вариантов:
Поместить картинку в контейнер, контейру прописать display:table. Туда же див с position:absolute; right:0;

Автор: maxipub 4.2.2012, 15:35

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

Единственное, что пока придумалось - сделать слой размерами с картинки, картинку - его бэкграундом, ну и далее уже твори что хочешь. Но что то мне этот вариант не очень симпатичен.

Автор: $дмитрий 4.2.2012, 18:33

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

Код


<!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>

Автор: maxipub 5.2.2012, 13:25

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

Огромное человеческое спасибо! smile