ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить псевдоэлемент :before под элементом ?
8 сообщений из 8, страница 1 из 1
Как расположить псевдоэлемент :before под элементом ?
    #38730060
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Вот в этом примере синий прямоугольник (#fore:before) необходимо расположить под красным прямоугольником (#fore).
И всё это должно быть расположено внутри абсолютно позиционированного контейнера (#wrapper).
Но синий прямоугольник вниз "идти" не хочет...

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
    #wrapper     { position: absolute; width: 300px; height: 500px; background: rgb(200,200,200); }
    #fore        { position: relative; width: 100px; height: 30px; background: red; z-index: 1; }
    #fore:before { display: block; position: relative; width: 100px; height: 30px; background: blue;
                   top: 10px; left: 10px; content: ""; z-index: 0;}
</style>

</head><body>

<div id="wrapper">
    <div id="fore"></div>
</div>

</body></html>
...
Рейтинг: 0 / 0
27.08.2014, 12:30
| Ответить | Цитировать | Написать  
Как расположить псевдоэлемент :before под элементом ?
    #38730107
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Небольшая поправка: блок #fore тоже должен быть абсолютно позиционирован.
...
Рейтинг: 0 / 0
27.08.2014, 12:55
| Ответить | Цитировать | Написать  
Как расположить псевдоэлемент :before под элементом ?
    #38730289
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
псевдоэлемент ":before" всегда будет чилдом того элемента, на который его ставят.

сделай "#wrapper:before" вместо "#fore:before", и жизнь наладится.
...
Рейтинг: 0 / 0
27.08.2014, 14:04
| Ответить | Цитировать | Написать  
Как расположить псевдоэлемент :before под элементом ?
    #38730681
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторсделай "#wrapper:before" вместо "#fore:before", и жизнь наладится.
НЕ получится. Положение элемента [#fore:before] зависит от положения элемента [#fore].
Если вместо [#fore:before] использовать [#wrapper:before], то мы не сможем его корректно спозиционировать, т.к. положение элемента [#fore] определяется скриптами и на уровне css неизвестно.
...
Рейтинг: 0 / 0
27.08.2014, 16:43
| Ответить | Цитировать | Написать  
Как расположить псевдоэлемент :before под элементом ?
    #38730857
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Cyrax_02авторсделай "#wrapper:before" вместо "#fore:before", и жизнь наладится.
НЕ получится. Положение элемента [#fore:before] зависит от положения элемента [#fore].
Если вместо [#fore:before] использовать [#wrapper:before], то мы не сможем его корректно спозиционировать, т.к. положение элемента [#fore] определяется скриптами и на уровне css неизвестно.дык двигай скриптами [#wrapper], а не [#fore].

или, как вариант, [#fore] сделай бесцветным, а внутрь него помести [#fore_inner] в роли красного прямоугольника. Тогда синий [#fore:before] можно будет спрятать под [#fore_inner].

в общем суть такова - :before нельзя засунуть под тот элемент, на который его навесили.
...
Рейтинг: 0 / 0
27.08.2014, 18:36
| Ответить | Цитировать | Написать  
Как расположить псевдоэлемент :before под элементом ?
    #38731779
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
автордык двигай скриптами [#wrapper], а не [#fore].
Хотели сказать, двигать [#wrapper:before] ?
Псевдоэлементы скриптами не двигаются.

авторили, как вариант, [#fore] сделай бесцветным, а внутрь него помести [#fore_inner] в роли красного прямоугольника. Тогда синий [#fore:before] можно будет спрятать под [#fore_inner].
Тогда уж проще поместить синий прямоугольник внутрь wrapper'а перед красным.
В любом случае, это уже изменение структуры. Синий прямоугольник - не является самостоятельным объектом, а выполняет роль эффекта (который невозможно получить иным способом). Именно поэтому, делать синий прямоугольник самостоятельным объектом - это нарушение структурной логики.
...
Рейтинг: 0 / 0
28.08.2014, 15:36
| Ответить | Цитировать | Написать  
Как расположить псевдоэлемент :before под элементом ?
    #38731910
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Cyrax_02автордык двигай скриптами [#wrapper], а не [#fore].
Хотели сказать, двигать [#wrapper:before] ?нет, именно [#wrapper].

[#fore] будет двигаться вместе с ним, его координаты привязаны к родителю (если у родителя position:absolute или position:relative или position:fixed)

если на [#wrapper] еще и навесить :before, то он тоже при этом будет двигаться. Ну и окажется под [#fore], что требовалось.
...
Рейтинг: 0 / 0
28.08.2014, 16:42
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
Как расположить псевдоэлемент :before под элементом ?
    #39460507
Julie Ivanova
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Julie Ivanova
Гость
Яростный Меч, огромное Вам человеческое СПАСИБО! Ваша подсказка помогла мне решить проблему, над которой я уже измучилась вся. Еще раз СПАСИБО!!!
...
Рейтинг: 0 / 0
26.05.2017, 15:14
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить псевдоэлемент :before под элементом ?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]