Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как расположить псевдоэлемент :before под элементом ? / 8 сообщений из 8, страница 1 из 1
27.08.2014, 12:30
    #38730060
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить псевдоэлемент :before под элементом ?
Вот в этом примере синий прямоугольник (#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:55
    #38730107
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить псевдоэлемент :before под элементом ?
Небольшая поправка: блок #fore тоже должен быть абсолютно позиционирован.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.08.2014, 14:04
    #38730289
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить псевдоэлемент :before под элементом ?
псевдоэлемент ":before" всегда будет чилдом того элемента, на который его ставят.

сделай "#wrapper:before" вместо "#fore:before", и жизнь наладится.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.08.2014, 16:43
    #38730681
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить псевдоэлемент :before под элементом ?
авторсделай "#wrapper:before" вместо "#fore:before", и жизнь наладится.
НЕ получится. Положение элемента [#fore:before] зависит от положения элемента [#fore].
Если вместо [#fore:before] использовать [#wrapper:before], то мы не сможем его корректно спозиционировать, т.к. положение элемента [#fore] определяется скриптами и на уровне css неизвестно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.08.2014, 18:36
    #38730857
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить псевдоэлемент :before под элементом ?
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
| Ответить | Цитировать | Написать  
28.08.2014, 15:36
    #38731779
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как расположить псевдоэлемент :before под элементом ?
автордык двигай скриптами [#wrapper], а не [#fore].
Хотели сказать, двигать [#wrapper:before] ?
Псевдоэлементы скриптами не двигаются.

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

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

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


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