[РЕШЕНО] CSS выбор родительского элемента - HTML и CSS

s88s · 18.09.2017, 17:11

Доброго времени суток!

Помогите решить один вопрос .

У меня есть три блока div

Код:


<div class="1">
      <div class="2">
            <div class="3">
                  Какой то код
            </div>
      </div>
</div>

У блоков один и два в css заданы свои параметры (размер,цвет,место положения и тд)

Возможно ли третьему блоку div задать родителя не второй блок div а первый ... если это возможно сделать то как?

Решение:

Цитата:

Можно сделать через position absolute и z-index.

вот пример

Код:

<!DOCTYPE html>
<html lang="en-US">
<head>

    <title>Page-Title</title>
    <meta charset="utf-8"/>

    <style type="text/css">

    #_1{
        width: 400px; height: 400px; margin: 0px auto; background: #aaa;
        padding-top: 50px; box-sizing: border-box;
        box-shadow: 0 0 4px #000;
    }

    #_2{
        width: 300px; height: 300px; margin: 0px auto; background: #ccc;
        box-shadow: 0 0 4px #000;
    }

    #_3{
        width: 200px; height: 400px; margin: -50px auto; background: #eee;
        box-shadow: 0 0 4px #000;
        position: absolute; margin-left: 50px;
    }

    </style>

</head>
<body>


<div id="_1">
    <div id="_2">
        <div id="_3">
            
        </div>        
    </div>
</div>

</body>
</html>

Вадим Мошев · 18.09.2017, 17:20

То есть, чтобы третий блок унаследовал свойства первого?
Тогда, думаю, так:

Код:

div1, div3 {
...
}

div2 {
...
}

s88s · 18.09.2017, 17:50

Цитата:

Сообщение от Вадим Мошев

То есть, чтобы третий блок унаследовал свойства первого?
Тогда, думаю, так:

Код:

div1, div3 {
...
}

div2 {
...
}

нет.

к примеру у первого блока div размер 1000px на 1000px ... у второго блока div размер ну скажем 700px на 700px и третий блок должен к примеру иметь размер width = 200px а height = 100% и причем эти 100% должны быть не по второму блоку div а по первому то есть должно получится что то типа такого как на рисунке во вложении

первый блок div черный фон
второй блок div синий фон
третий блок div красный фон

Так как реально сделать то что мне надо или нет?

Вадим Мошев · 18.09.2017, 22:48

ИМХО, разве что через скрипты. На чистом CSS, ИМХО, такое невозможно.

s88s · 19.09.2017, 07:50

Цитата:

Сообщение от Вадим Мошев

ИМХО, разве что через скрипты. На чистом CSS, ИМХО, такое невозможно.

А не через CSS возможно?

pompiduskus · 19.09.2017, 08:10

Можно сделать через position absolute и z-index.

вот пример

Код:

<!DOCTYPE html>
<html lang="en-US">
<head>

    <title>Page-Title</title>
    <meta charset="utf-8"/>

    <style type="text/css">

    #_1{
        width: 400px; height: 400px; margin: 0px auto; background: #aaa;
        padding-top: 50px; box-sizing: border-box;
        box-shadow: 0 0 4px #000;
    }

    #_2{
        width: 300px; height: 300px; margin: 0px auto; background: #ccc;
        box-shadow: 0 0 4px #000;
    }

    #_3{
        width: 200px; height: 400px; margin: -50px auto; background: #eee;
        box-shadow: 0 0 4px #000;
        position: absolute; margin-left: 50px;
    }

    </style>

</head>
<body>


<div id="_1">
    <div id="_2">
        <div id="_3">
            
        </div>        
    </div>
</div>

</body>
</html>

s88s · 20.09.2017, 19:42

Цитата:

Сообщение от pompiduskus

Можно сделать через position absolute и z-index.

при помощи position и z-index все получилось как надо мне =)
спасибо за помощь! 10+ в карму

pompiduskus · 22.09.2017, 07:31

Не за что. =))

18.09.2017, 17:20	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	То есть, чтобы третий блок унаследовал свойства первого? Тогда, думаю, так: Код: `div1, div3 { ... } div2 { ... }`

22.09.2017, 07:31	#8
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Не за что. =)) <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
[Решено]: Как прикрепить вложенный div к верху родительского элемента div?	Женя32	HTML и CSS	2	29.09.2016 13:24
[РЕШЕНО]: Не подключаются css стили	NedoProgrammer	HTML и CSS	2	09.08.2016 15:20
Вытащить содержимое родительского элемента	Predator199	JavaScript, Ajax	5	16.06.2014 12:47
Выявление проблемы с блоками которые выходят за пределы родительского элемента	roman8p8	HTML и CSS	3	16.04.2012 06:44
обрезка фона родительского элемента	Love_silense	HTML и CSS	5	14.08.2009 13:01

18.09.2017, 22:48	#4
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	ИМХО, разве что через скрипты. На чистом CSS, ИМХО, такое невозможно.