Jump to content
  • 0

Относительное позиционирование


Raiden-=DM=-
 Share

Question

Ситуация следующая:

Появилась у меня бредовая мысль сделать тень наложением друг на друга 2х объектов с относительным позиционированием. Всё получилось нормально, второй текст воспринимается как тень первого, НО начались "непонятки"... Если прокручивать окно в эксплорере, то эти тексты висят, так как бы я задал им позиционирование absolute. Файрфокс все показывает нормально - тоесть надпись уползает вверх вместе со всем остальным. Можно как-то вылечить эксплорер?

Вот код:

<div style="width:500px; float:right; padding:0; margin:0 auto;">
<H1>Текст </H1>
<h2>Текст</h2>
</div>

И цсс к нему:

h1 { position:relative;
top:24px;
text-align:center;
padding:0;
margin:0;
color:#fff;
font-size:40px;
}
h2 { position:relative;
top:-18px;
left:3px;
padding:0;
margin:0;
color:#aaa;
font-size:40px;
z-index:-1}

Edited by Raiden-=DM=-
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
кстати щас проверил в ИЕ6-7, у меня всё отлично, давай скрин проблемы и скажи, куда ты текст вписываешь?

Хм... может это мои персональные глюки конечно....

Пока страница неподвижна, выглядит всё примерно так:

before.jpg

при попытке сдвинуть:

scrolled.jpg

Link to comment
Share on other sites

  • 0
Может "один пишем - два в уме"? Очень похоже что позишн:абсолют без релейтив-контейнера

дык я код сверху привел... Спецом релатив задавал позиционирование. Уже начинаю думать, что это глюк персонально МОЕГО эксплорера, такое возможно? Заголовки то внесены в див, внутри него - относительное позиционирование... Кроме того - в файрфоксе все кошерно показывает.

Link to comment
Share on other sites

  • 0
дык я код сверху привел... Спецом релатив задавал позиционирование. Уже начинаю думать, что это глюк персонально МОЕГО эксплорера, такое возможно? Заголовки то внесены в див, внутри него - относительное позиционирование... Кроме того - в файрфоксе все кошерно показывает.

у меня всё в норме 100%, но бывало такая проблема встречалась, я ещё Зумом глушил тока в путь :lol:

Link to comment
Share on other sites

  • 0

psywalker, зум же не помог :lol:

Я тут решил, что сию ерунду можно ведь и отрицательными отступами сделать, верно ведь? Но появился сопутствующий вопрос - z-index, если я не ошибаюсь, работает, только если выше указан position. Если пользоваться отступами, позиционирование не указывается. Как тогда внятно сказать заголовкам, кто тень, а кто надпись? Или просто по порядку написания: тень первая, потом надпись?

Link to comment
Share on other sites

  • 0
psywalker, зум же не помог :lol:

Я тут решил, что сию ерунду можно ведь и отрицательными отступами сделать, верно ведь? Но появился сопутствующий вопрос - z-index, если я не ошибаюсь, работает, только если выше указан position. Если пользоваться отступами, позиционирование не указывается. Как тогда внятно сказать заголовкам, кто тень, а кто надпись? Или просто по порядку написания: тень первая, потом надпись?

Да, поиграйтесь порядком следования по коду.

Link to comment
Share on other sites

  • 0

Justnewone, psywalker, огромное спасибо :lol:

Через отрицательные отступы всё работает. Но по прежнему непонятно, почему у меня эксплорер старый способ понимал плохо.... Кстати, проверил на другом компе под 6ю версию - те же грабли. Ну и бог с ними. Еще раз спасибо!

Link to comment
Share on other sites

  • 0
Justnewone, psywalker, огромное спасибо :lol:

Через отрицательные отступы всё работает. Но по прежнему непонятно, почему у меня эксплорер старый способ понимал плохо.... Кстати, проверил на другом компе под 6ю версию - те же грабли. Ну и бог с ними. Еще раз спасибо!

Не за что, приходи ещё

Link to comment
Share on other sites

  • 0
http://www.w3.org/TR/2003/CR-css3-text-200...4/#text-shadows

:lol:

Щас заговнят, что в IE его вообще нету...

Ой.... про такое я даже не знал. Каюсь - ламер. Но это ж CSS3 спецификация? Ее разве все браузеры понимают?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy