?

Log in

No account? Create an account
position: absolute; внутри блока с position: relative; - Homo webstandardicus [entries|archive|friends|userinfo]
Максим Россомахин

[ website | Webmascon.com ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

position: absolute; внутри блока с position: relative; [Mar. 28th, 2006|10:06 pm]
Максим Россомахин
Не расскажу чего-то нового — бывалые знают этот способ не хуже меня — помогу новичкам, благо, спрашивали и не раз.

Итак, сегодня речь пойдёт о способе, который я зову «Мама для мамонтёнка».

Иногда бывает необходимо разместить какой-то блок (буду ради краткости употреблять этот термин) в строго заданном положении относительно родительского. Тут, казалось бы, должно помочь абсолютное позиционирование потомка относительно родителя. Но на практике это может дать совершенно не тот эффект, что ожидаем.



Рассмотрим простейший код:


<div id="parent">
<div id="child">«Come on baby light my fire!»</div>
</div>


Предположим, мы хотим разместить внутренний блок в 20 пикселях левее и ниже верхнего левого угла родительского блока.
Попробуем сделать так (т.е. абсолютно позиционируем внутренний блок относительно родительского):


#parent {

margin: 50px 100px;
background: #000;
width: 500px;
height: 500px;
}

#child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #000;
}


И вот что получилось.
Это не то, что мы хотим, не так ли? Наш бедный-разнесчастный блочок уполз не к маме, а к дедушке (т.е. BODY)!

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;. Имеем следующий набор стилей:


#parent {
position: relative;
margin: 50px 100px;
background: #000;
width: 500px;
height: 500px;
}

#child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #000;
}


Рабочий пример. Оцените разницу.

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

<h1>У-у-у! Какой у вас дорогой трафик!<span></span></h1>

Присваиваем заголовку position: relative;, а span-у — position: absolute;.
Далее задаём фоном строчного элемента нужное нам изображение и позиционируем его относительно заголовка (обычно top: 0; left: 0;).


----
* — До меня доползли слухи, что Google может взять и забанить страницу (читай сайт), злоупотребляющую display: none (именно эта штука применяется в другом известном способе замены текста графикой).
LinkReply

Comments:
(Deleted comment)
[User Picture]From: rossomachin
2006-03-29 03:59 am (UTC)
Речь всё же идёт об «относительном» предке — абсолютность предка чаще бывает неудобна с точки зрения общей компоновки страницы — тут подробности не поясню т.к. они всегда разные. Отноcительный же ведёт себя прилично, если можно так выразиться. Его поведение более обычно, нежели у абсолютного.
(Reply) (Parent) (Thread)
From: (Anonymous)
2009-02-10 11:19 am (UTC)

Респект Дядь)

Ювелир блин, америку открыл!
(Reply) (Parent) (Thread)
[User Picture]From: evgeny
2006-03-28 09:57 pm (UTC)
Интересно, откуда появилась мысль о заголовке "У-у-у! Какой у вас дорогой трафик!"? ;-D
(Reply) (Thread)
[User Picture]From: rossomachin
2006-03-29 04:00 am (UTC)
А вот кстати не оттуда, откуда ты подумал! :-)
Т.е. не из личных реалий. Гипотетический трафик, гипотетическая дороговизна оного.
(Reply) (Parent) (Thread)
[User Picture]From: suvlehim_takac
2006-03-29 06:53 am (UTC)
Кстате о Google и бане.
Есть ли какие нибудь достоверные данные об отношении поисковиков к "текст реплейсмент". Ибо используются разные методы регулярно, а один знакомый SEO утверждает что это крайне черевато вечным баном.
(Reply) (Thread)
[User Picture]From: rossomachin
2006-03-29 07:44 am (UTC)
Насколько мне известно (и лишь из тредов в SEO-шных блогах/форумах), под бан подпадают тексты, скрытые display:block;-ом. Ну да это и понятно — мало ли что туда dirty SEO-master засунул.
(Reply) (Parent) (Thread)
[User Picture]From: rossomachin
2006-03-29 07:48 am (UTC)
Поправка: display:none; конечно-же.
(Reply) (Parent) (Thread)
(Deleted comment)
[User Picture]From: rossomachin
2006-03-29 09:56 am (UTC)
Ммм… А что там с mac ie? С интересом выслушаю и сам, т.к. не знаю.
(Reply) (Parent) (Thread)
(Deleted comment)
[User Picture]From: rossomachin
2006-03-29 11:30 am (UTC)
Спасибо!
(Reply) (Parent) (Thread)
[User Picture]From: levgem
2006-12-27 12:50 am (UTC)
честно говоря, про mac IE лучше смело забыть. Он больше не поддерживается и непойми кем используется
(Reply) (Parent) (Thread)
[User Picture]From: fuzzze
2006-07-07 05:56 pm (UTC)
От, карма!:) Вместо того, чтобы сдавать заказчику верстку (обещал к утру сделать), сижу читаю блоги. Специально ничего не ищу. И тут - оппа! Решение именно той проблемы, с которой предстояло долго и упорно бороться. Спасибо за здровый сон! :)))
(Reply) (Thread)
[User Picture]From: rossomachin
2006-07-08 09:53 am (UTC)
Наздоровье.
(Reply) (Parent) (Thread)
[User Picture]From: oxpaha
2006-08-12 02:34 pm (UTC)
Для Гугла можно обрабатывать скриптом и удалять позиции, да и вообще можно документ почистить :)
(Reply) (Thread)
[User Picture]From: rossomachin
2006-08-12 02:54 pm (UTC)
Для Гугла можно обрабатывать скриптом и удалять позиции

Зачем так извращатся?
(Reply) (Parent) (Thread)
[User Picture]From: oxpaha
2006-08-12 03:10 pm (UTC)
Было бы неплохо, что бы перед тем, как отдать роботу поисковой системе страницу, удалить из него всё лишнее, что бы пользователь ища ему необходимое, попадая на страницу находил именно то, что нужно. Что бы поисковой системой не индексировались новости выводимую на страницу, которые завтра будут другимы, топ 10 тем за сутки и т.д. :)
К тому же, если убирать все лишнее, стрницы будут намного быстрее индексироваться и меньше вероятность того, что страицы будут баниться ;)
(Reply) (Parent) (Thread)
[User Picture]From: oxpaha
2006-08-12 03:12 pm (UTC)
ЗЫЖ: Зафренжу?
(Reply) (Parent) (Thread)
[User Picture]From: rossomachin
2006-08-12 03:23 pm (UTC)
А почему бы и нет?
(Reply) (Parent) (Thread)
[User Picture]From: oxpaha
2006-08-12 03:29 pm (UTC)

Ok =)

А не спеть ли мне песню? А не спеть!
(Reply) (Parent) (Thread)
[User Picture]From: ivan_nn
2007-04-04 07:46 am (UTC)

Подскажите, пожалуйста!

Почему в моём коде див-родитель не растягивается до вертикального размера дива-потомка? И как бы сделать так, чтобы растягивался? (Очень нужно именно в ИЕ)


Gac paalyq - radena ot, zy j - byic anor eu boc mebyrelig xaoza mymulisy ifua ri, peuo, ziwouhaay oxuysiapo. Va, bybuiweh kuycozawo layzooge akymyafir c. Oanyzyh jyyjueh ybo adasuaco giihomyq fy p, cuqu pacesouma gypuxuimo syiakubok yjuxura sixogof suzytagol mivolyxa - jyikozami jaexi eha - aoriuk idesatipa k ke.

Zadeaib vyvexal kipo tyziyeho faotywo ubitau kurozoeta t ho v faviaxa yza mebovuz cocym - sefumu vic famiowoe veeqe hoy v ep. Isowyyna aaxyfi iner sirogu sup piibej gew - le ygaigyw tu ocely wa liwumeoc qiur - yfazuhiom xuqenu zuwoej caduvas jacike jir cilixyve. Ybi ciwuhiwe taam doiumej axuvab uzyub jyeeymiu yajef xukeny sida - xetydepu pidesy myookyvyd vodehove laq mer nugyvyz.


(Reply) (Thread)
[User Picture]From: ivan_nn
2007-04-04 07:48 am (UTC)
ну конечно, кода не видно :(
пробую ещё раз...

<div style="position: relative; width: 400px; border: 1px solid orange">
Gac paalyq - radena ot, zy j - byic anor eu boc mebyrelig xaoza mymulisy ifua ri, peuo, ziwouhaay oxuysiapo. Va, bybuiweh kuycozawo layzooge akymyafir c. Oanyzyh jyyjueh ybo adasuaco giihomyq fy p, cuqu pacesouma gypuxuimo syiakubok yjuxura sixogof suzytagol mivolyxa - jyikozami jaexi eha - aoriuk idesatipa k ke.
<div style="position: absolute; top: 30px; right: 10px; width: 100px; border: 1px solid green; background: #CCFFCC">
Zadeaib vyvexal kipo tyziyeho faotywo ubitau kurozoeta t ho v faviaxa yza mebovuz cocym - sefumu vic famiowoe veeqe hoy v ep. Isowyyna aaxyfi iner sirogu sup piibej gew - le ygaigyw tu ocely wa liwumeoc qiur - yfazuhiom xuqenu zuwoej caduvas jacike jir cilixyve. Ybi ciwuhiwe taam doiumej axuvab uzyub jyeeymiu yajef xukeny sida - xetydepu pidesy myookyvyd vodehove laq mer nugyvyz.
</div>
</div>
(Reply) (Thread)
From: (Anonymous)
2008-11-04 04:32 pm (UTC)
Я тоже использую этот способ, но недавно наткнулся на небольшой баг, связанный с IE. Если дочерний элемент (у которого прописано position: absolute) выровнять по нижнему краю с помощью bottom, то возникает ошибка и он встает не куда надо. Если есть информация как это исправить - скажи, буду очень благодарен =)
(Reply) (Thread)
From: (Anonymous)
2009-11-02 11:43 am (UTC)
Спасибо БОЛЬШОЕ!!! Очень помогла Ваша статья.
(Reply) (Thread)
From: (Anonymous)
2009-12-20 06:39 pm (UTC)

Большое мерси

Именно то с чем боролся последний час.
(Reply) (Thread)
From: (Anonymous)
2010-01-31 06:43 pm (UTC)
Огромное спасибо за совет, этот вариант как-то в голову не пришел( Извращался так, что чуть не бросил всю затею. А тут оба-на и всего-то одну строчку добавить к родителю!!!)))
(Reply) (Thread)