Absolute под дочерним relative

@monax_111 · Регистрация: 06.07.2014

Author24 — интернет-сервис помощи студентам

Доброво всем, я знаю, что абсолют можно засунуть под релетив, если у них общий родитель с релатив, но если у меня вот такая ситуация? Мне нудно что бы класс name_trap лежал НАД классом arrow, а все остальное под ним!

HTML5

<body>
    <div class="middle">
        <div class="middle_center">
            <div class="hole">
                <div class="trap">
                    <center class="name_trap">АЧ3-2</center>
                </div>
            </div>
            <div class="arrow" style="width:100px;transform:rotate(-30deg)"></div>
        </div>
    </div>
    
</body>

PHP

.middle_center{position:relative;padding:20px}
.hole{z-index:2;position:relative;display:inline-block; vertical-align:top;padding:2px; margin:10px;width:250px;background-color:WhiteSmoke;}   
.trap{z-index:3;position:relative;display:block;margin-left:30px;margin-right:30px;background-color:WhiteSmoke;}
.name_trap{z-index:5;background-color: WhiteSmoke;position:relative;padding:10px;margin-bottom: 5px;}
.arrow {z-index:4;transform-origin:0;background: #333; height: 4px; position: absolute;}

@vovandr · 22.11.2014, 13:27

Могу ошибаться, но данная задача, с той разметкой как она есть, не решается

@monax_111 · 22.11.2014, 13:51 **[ТС]**

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

не решается

то есть как не решается????
ВООБЩЕ НЕ РЕШАЕТСЯ?????

@Fedor92 · 22.11.2014, 14:21

Пф... top:0 для arrow...

@monax_111 · 22.11.2014, 14:23 **[ТС]**

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

Пф... top:0 для arrow...

и что мне это даст?

@Fedor92 · 22.11.2014, 14:24

Это прижмёт блок arrow к верху... Если надо к низу тогда bottom:0...

@vovandr · 22.11.2014, 16:08

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

Это прижмёт блок arrow к верху... Если надо к низу тогда bottom:0...

Ему не надо прижимать, ему нужно слой наверх поместить

@Fedor92 · 22.11.2014, 16:32

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

Ему не надо прижимать, ему нужно слой наверх поместить

А в чём разница?

Мне нудно что бы класс name_trap лежал НАД классом arrow

@vovandr · 22.11.2014, 16:35

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

А в чём разница?

Читайте топикстартера задание внимательнее и думаю разберетесь

@Fedor92 · 22.11.2014, 16:40

ВЫ хотите сказать, что блок arrow находится не над остальными блоками?

Для чего z-index и position:absolute?

@vovandr · 22.11.2014, 16:44

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

Мне нудно что бы класс name_trap лежал НАД классом arrow, а все остальное под ним!

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

ВЫ хотите сказать, что блок arrow находится не над остальными блоками?

Суббота в самом разгаре я смотрю

@Fedor92 · 22.11.2014, 17:20

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

Суббота в самом разгаре я смотрю

Ну так и

я о том...

Добавлено через 31 минуту
vovandr, ссори дочитал до конца...

Вложенный элемент не может иметь z-index больше родительского... Туплю... Надо снова отдохнуть...

@monax_111 · 23.11.2014, 14:04 **[ТС]**

Fedor92, vovandr, ну таки есть какое то решение? или я пошел все переделывать?

@Fedor92 · 23.11.2014, 14:07

vovandr уже отписал, что при данной вёрстке решения нет... Вложенный элемент не может иметь z-index больше родительского, а соответственно его слой не может располагаться над родительским... Он либо вместе с родительским будет под стрелкой - либо над ней...

@monax_111 · 23.11.2014, 23:11 **[ТС]**

Fedor92, окай(((

Добавлено через 8 часов 59 минут
Fedor92, vovandr, а если я вот так попробую?

HTML5

<body>
    <div class="middle">
        <div class="middle_center">
            <div class="hole">
                <div class="trap">
                    <center class="name_trap">АЧ3-2</center>
                    <div class="arrow" style="width:300px;transform:rotate(8deg)"></div>
                </div>
            </div>
            <div class="hole">
                <div class="trap">
                    <center class="name_trap">АЧ3-2</center>
                    <div class="arrow" style="width:300px;transform:rotate(170deg)"></div>
                </div>
            </div>
        </div>
    </div>
    
</body>

тоесть к trap писабачить стрелочку?

@Fedor92 · 24.11.2014, 00:01

Всё дело в том, что блок trap является вложенным блоком для того, чтобы его расположить над остальными дивами - он должен быть с ними на одном уровне, то есть структура будет выглядеть следующим образом..

HTML5

<html>
<style>
.middle_center{width:100%; height:60px; position:absolute; border:1px solid red}
.hole{width: 80%; height:50px; z-index:2;position:absolute; display:inline-block; vertical-align:top;padding:2px; background-color:WhiteSmoke; border:1px solid blue; right:0; left:0; margin:0 auto}   
.trap{width: 60%; height:40px;z-index:9999;position:relative;display:block;margin-left:30px;margin-right:30px;background-color:WhiteSmoke; border:1px solid green; right:0; left:0; margin:0 auto}}
.name_trap{z-index:9999;background-color: WhiteSmoke;position:relative;padding:10px;margin-bottom: 5px}
.arrow {margin-left:350px; top:40px; z-index:4;transform-origin:0;background: #333; height: 4px; position: absolute;}
</style>
<body>
    <div class="middle"></div>      
    <div class="middle_center"></div>
    <div class="hole"></div>
    <div class="trap">
        <center class="name_trap">АЧ3-2</center>
    </div>
    <div class="arrow" style="width:300px;transform:rotate(8deg)"></div>
</body>
</html>

@monax_111 · 24.11.2014, 12:34 **[ТС]**

Fedor92, АХХАХАХА!!! Я СДЕЛАЛ!!! СМОТРИ!!!

CSS

.middle_center{position:relative;padding:20px}
.hole{z-index:2;position:relative;display:inline-block; vertical-align:top;padding:2px; margin:10px;width:250px;background-color:WhiteSmoke;}   
.trap{z-index:5;position:relative;display:block;margin-left:30px;margin-right:30px;background-color:WhiteSmoke;}
.name_trap{z-index:6;background-color: WhiteSmoke;position:relative;padding:10px;margin-bottom: 5px;}
.arrow {z-index:4;transform-origin:0;background: #333; height: 4px; position: absolute;}

HTML5

<body>
    <div class="middle">
        <div class="middle_center">
            <div class="hole">
                <div class="trap">
                    <center class="name_trap">АЧ3-2</center>
                </div>
                <div class="arrow" style="width:600px;transform:rotate(7deg)"></div>
                <div class="arrow" style="width:300px;left:300px;transform:rotate(170deg)"></div>
            </div>
            <div class="hole">
                <div class="trap">
                    <center class="name_trap">АЧ3-2</center>
                </div>
                
            </div>
        </div>
    </div>
    
</body>

@Fedor92 · 24.11.2014, 12:41

Ха-ха-ха...Это что?

@Fedor92 · 24.11.2014, 12:54

С одной стороны стрелка над всеми блоками, а с другой под всеми блоками... Гениально...

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	24.11.2014, 12:41	18
	Ха-ха-ха...Это что? Миниатюры 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	24.11.2014, 12:54	19
	С одной стороны стрелка над всеми блоками, а с другой под всеми блоками... Гениально... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.11.2014, 13:27	2
	Могу ошибаться, но данная задача, с той разметкой как она есть, не решается 0

@monax_111 2 / 2 / 0 Регистрация: 06.07.2014 Сообщений: 61
	22.11.2014, 13:51 [ТС]	3
	Сообщение от vovandr не решается то есть как не решается???? ВООБЩЕ НЕ РЕШАЕТСЯ????? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.11.2014, 14:21	4
	Пф... top:0 для arrow... 0

@monax_111 2 / 2 / 0 Регистрация: 06.07.2014 Сообщений: 61
	22.11.2014, 14:23 [ТС]	5
	Сообщение от Fedor92 Пф... top:0 для arrow... и что мне это даст? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.11.2014, 14:24	6
	Это прижмёт блок arrow к верху... Если надо к низу тогда bottom:0... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.11.2014, 16:08	7
	Сообщение от Fedor92 Это прижмёт блок arrow к верху... Если надо к низу тогда bottom:0... Ему не надо прижимать, ему нужно слой наверх поместить 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.11.2014, 16:32	8
	Сообщение от vovandr Ему не надо прижимать, ему нужно слой наверх поместить А в чём разница? Мне нудно что бы класс name_trap лежал НАД классом arrow 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.11.2014, 16:35	9
	Сообщение от Fedor92 А в чём разница? Читайте топикстартера задание внимательнее и думаю разберетесь 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.11.2014, 16:40	10
	ВЫ хотите сказать, что блок arrow находится не над остальными блоками? Для чего z-index и position:absolute? Миниатюры 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.11.2014, 16:44	11
	Сообщение от monax_111 Мне нудно что бы класс name_trap лежал НАД классом arrow, а все остальное под ним! Сообщение от Fedor92 ВЫ хотите сказать, что блок arrow находится не над остальными блоками? Суббота в самом разгаре я смотрю 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.11.2014, 17:20	12
	Сообщение от vovandr Суббота в самом разгаре я смотрю Ну так и я о том... Добавлено через 31 минуту vovandr, ссори дочитал до конца... Вложенный элемент не может иметь z-index больше родительского... Туплю... Надо снова отдохнуть... 0

@monax_111 2 / 2 / 0 Регистрация: 06.07.2014 Сообщений: 61
	23.11.2014, 14:04 [ТС]	13
	Fedor92, vovandr, ну таки есть какое то решение? или я пошел все переделывать? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	23.11.2014, 14:07	14
	vovandr уже отписал, что при данной вёрстке решения нет... Вложенный элемент не может иметь z-index больше родительского, а соответственно его слой не может располагаться над родительским... Он либо вместе с родительским будет под стрелкой - либо над ней... 0