Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 25.01.2014
Сообщений: 9
1

При появлении div1 "уползает" под div2 z-index не работает

02.02.2014, 17:20. Показов 1217. Ответов 8
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Есть Вот такой CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

* {margin: 0; padding: 0;}
body {margin: 30px; font: 13px/1.5 "Trebuchet MS", Tahoma, Arial;}
a {color: #0094D6;}
p {padding: 7px 0;}
h1 {font-size: 21px; font-weight: normal; margin: 0 0 30px;}
 
.section {
    width: 800px;
    background: #EFEFEF;
    margin: 0 0 30px;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}
.box {
    display: none;
    border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
 
}
.box.visible {
    display: block;
 
}
 
.section.vertical {
    width: 900px;
    border-left: 160px solid #fff;
    border-radius: 0 15px 15px 15px;
}
.vertical .tabs {
    width: 160px;
    float: left;
    display: inline;
    margin: 0 0 0 -160px;
}
.vertical .tabs li {
    padding: 0 13px;
    margin: 0 0 1px;
    border: 1px solid #E4E4E4;
    border-right: 1px solid #F9F9F9;
    width: 132px;
    height: 25px;
}
.vertical .tabs li:hover {
    width: 131px;
}
.vertical .tabs li.current {
    width: 133px;
    color: #444;
    background: #EFEFEF;
    border: 1px solid #D4D4D4;
  border-right: 1px solid #EFEFEF;
  margin-right: -1px;
    border-radius: 5px 0 0 5px;
}
.vertical .box {
  border-width: 1px;
    border-radius: 0 15px 15px 15px;
    float: left;
}
.eda {
width: 150px;
height: 200px;
background: rgba(192, 192, 201, 1);
border: solid 1px #000;
border-radius: 10px;
padding: 10px;
margin: 15px;
float: left;
z-index: 100;
}
.name_eda {
height: 50px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 14pt;
line-height: 0.9em;
}
.pic_eda {
text-align: center;
border-radius: 5px;
cursor: pointer;
}
#price {
font-family: 'PT Sans Narrow', sans-serif;
font-weight: bold;
font-size: 16pt;
background: #999;
border-radius: 5px;
border: solid 1px #000;
padding: 0 5px 0 5px;
color: #fff;
text-align: center;
margin-top: 10px;
cursor: pointer;
}
.sidebar {
position: relative;
font-family: 'PT Sans Narrow', sans-serif;
width: 200px;
height: 500px;
background: rgba(239, 239, 239, 1);
border: solid 1px #D4D4D4;
border-radius: 10px;
padding: 10px;
float: right;
 
}
/*Классы, для js*/
.togglebox1 {
/*  background-color:#CCC;
    border: 1px solid #a9a9a9;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px; */
    overflow: hidden;
    font-size: 1.2em;
    width: 150px;
    clear: both;
    margin-bottom:10px;
    background: rgba(192, 192, 201, 1);
    border: solid 1px #000;
    border-top: 0px;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin-left: -11px;
    z-index: 2000;
 
    
}
.togglebox1 .block {
    padding: 20px;
    z-index: 2000;
}
И вот такой HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

<!DOCTYPE html>
<html>
<head>
    <title>Пример №1 к статье "Универсальный jQuery-скрипт для блоков с вкладками (табами)"</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700&subset=cyrillic-ext,latin,cyrillic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=cyrillic-ext,latin,cyrillic' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="tabs.js"></script>
 
<script src="js/jquery.min.js" type="text/javascript"></script>
 
<script language="javascript" type="text/javascript" src="js/vtip.js"></script>
</head>
 
<body>
 
 
<div class="section vertical">
<!--Список табов-->
    <ul class="tabs">
        <li class="current">Салаты</li>
        <li>Супы</li>
        <li>Основные блюда</li>
        <li>Холодные закуски</li>
        <li>Горячие закуски</li>
        <li>Десерты</li>
        <li>Карта бара</li>
</ul>
 
    <div class="box visible">
        <div>Что бы прочитать описание блюда кликните по картинке, что бы добавить блюдо в заказ, кликните по цене.</div>
<!-- Карточка товара -->
        <div class="eda">
        <p class="name_eda">Салат "Капрезе"</p>
        <p class="pic_eda"><img src="images/1.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
<!-- Карточка товара -->
        
        <div class="eda">
        <p class="name_eda">Салат "Цезарь с курицей"</p>
        <p class="pic_eda"><img src="images/6.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
        
        
        <div class="eda">
        <p class="name_eda">Салат "Руккола с креветками"</p>
        <p class="pic_eda"><img src="images/4.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
        
        
        <div class="eda">
        <p class="name_eda">Салат "Цезарь"<br>(с курицей - 150 г.)</p>
        <p class="pic_eda"><img src="images/6.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
 
<!-- Карточка товара -->
        <div class="eda">
        <p class="name_eda">Салат "Капрезе"</p>
        <p class="pic_eda"><img src="images/1.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
<!-- Карточка товара -->
        
        <div class="eda">
        <p class="name_eda">Салат "Цезарь с курицей"</p>
        <p class="pic_eda"><img src="images/6.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
        
        
        <div class="eda">
        <p class="name_eda">Салат "Руккола с креветками"</p>
        <p class="pic_eda"><img src="images/4.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
        
        
        <div class="eda">
        <p class="name_eda">Салат "Цезарь"<br>(с курицей - 150 г.)</p>
        <p class="pic_eda"><img src="images/6.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
 
 
 
    </div>
 
    
    
 
    
    
    <div class="box"><!--Вторая вкладка-->
        <div class="eda">
        <p class="name_eda">Салат "Капрезе"</p>
        <p class="pic_eda"><img src="images/1.jpg"></p>
        <div class="togglebox1">
            <div class="block">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
    </div>
 
    <div class="box">
        <p>Структурализм, как следует из вышесказанного, заполняет из ряда вон выходящий дуализм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Суждение осмысляет интеллект, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире.</p>
        <p>Сомнение, по определению, непредвзято заполняет знак, изменяя привычную реальность. Современная ситуация, следовательно, подрывает трагический смысл жизни, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Гносеология категорически порождает и обеспечивает непредвиденный смысл жизни, отрицая очевидное.</p>
    </div>
 
    <div class="box">
        <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
        <p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
        <p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
        <p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    </div>
    <div class="box">
        <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
        <p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
        <p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
        <p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    </div>
    <div class="box">
        <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
        <p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
        <p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
        <p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    </div>
    <div class="box">
        <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
        <p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
        <p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
        <p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    </div>
 
</div><!-- .section -->
 
<div class="sidebar">
        <h2>Ваш заказ:</h2>
        <div class="order">
        <a href="" return false>Оформить заказ</a>
        <hr>
        </div>
            <div class="order" style="position: absolute; bottom: 0; width: 200px; padding: 5px 0 10px 0;">
                <hr>
                <a href="" return false>Оформить заказ</a>
            </div>
</div>
 
</body>
</html>
тут страница в работе.
Когда нажимаем на картинку блюда. открывается див с описанием, но он заезжает под нижестоящий див.
прописал у выезжающего дива z-index: 2000; а у дива с которого он выезжает z-index: 100;
но в результате при работе скрипта, все равно див Toggle1 заезжает за див eda.

Вот на всякий случай привожу скроллинг JS

Javascript
1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function(){
 
    //Hide (Collapse) the toggle containers on load
    $(".togglebox1").hide(); 
 
    //Slide up and down on hover
    $(".pic_eda").click(function(){
        $(this).next(".togglebox1").slideToggle("slow");
    });
 
});
Знающие люди, подскажите пожалуйста, как сделать так, чтобы выпадающий див "toggle1", при работе скрипта, находился поверх нижних дивов.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 02.02.2014, 17:20
Ответы с готовыми решениями:

Закрыть div1 при наведении на div2 и наоборот
Сейчас div#iphoneId и div#ipadId открываются и закрываются при наведении. Вопрос: Как при...

css правый край div1 прижать к правому краю div2
Есть div1, внутри него div2. Как div2 правым краем с помощью css прижать правому краю div2. ...

Пытаюсь спрятать нижнюю часть header под верхней. Не работает z-index
Мне нужен header состоящий из 2х частей: верхняя будет видна всегда, а нижняя будет иногда...

Найти функцию Z при условии если G>F то Z:=(F+G)div2 ,иначе Z:=F*G*2.
Даны два значения G,F. F-не изменяется, G-начальное значение диапазона, найти функцию Z при условии...

При размещении объектов в одну линию уползает разметка
добрый вечер. Сегодня столкнулся с проблемой: необходимо отобразить в одну линию 2 или 3 обьекта...

8
12 / 12 / 6
Регистрация: 01.09.2013
Сообщений: 125
02.02.2014, 17:45 2
Попробуйте поставить свойство "position: relative", везде где вы ставили свойство "z-index".
0
0 / 0 / 0
Регистрация: 25.01.2014
Сообщений: 9
02.02.2014, 17:49  [ТС] 3
Результат тот же, к сожалению.
0
12 / 12 / 6
Регистрация: 01.09.2013
Сообщений: 125
02.02.2014, 18:29 4
А что именно, у вас не получается?

z-index работает только с position.
При добавление к селектору "togglebox1", необходимо добавить следующие свойства: "z-index: 2000; position: relative".
После применения вышенаписанных свойств, у меня блок находиться в самом верху.
Если после данных изменений, у вас блок также находиться, ниже остальных блоков, то проверьте всё ли правильно вы сделали.
Допустим изменить значения свойства z-index, у слоя которого значение равно "1000", заменить на "2", а у того слоя которого значение равно "2000", заменить на "1".
0
0 / 0 / 0
Регистрация: 25.01.2014
Сообщений: 9
02.02.2014, 18:43  [ТС] 5
CSS
1
2
3
4
5
6
7
8
9
10
11
12

.eda {
width: 150px;
height: 200px;
background: rgba(192, 192, 201, 1);
border: solid 1px #000;
border-radius: 10px;
padding: 10px;
margin: 15px;
float: left;
z-index: 1;
position: relative;
}
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.togglebox1 {
/*  background-color:#CCC;
    border: 1px solid #a9a9a9;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px; */
    overflow: hidden;
    font-size: 1.2em;
    width: 150px;
    clear: both;
    margin-bottom:10px;
    background: rgba(192, 192, 201, 1);
    border: solid 1px #000;
    border-top: 0px;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin-left: -11px;
    z-index: 2;
    position: relative;
 
 
    
}
.togglebox1 .block {
    padding: 20px;
    z-index: 3;
    position: relative;
}
добавил position: relative;
по коду видно, но если перейти по ссылке и кликнуть по картинке, то видно, что выпадающий див находится под статическим слоем. Не могу понять, почему не работает z-index.
0
12 / 12 / 6
Регистрация: 01.09.2013
Сообщений: 125
02.02.2014, 19:08 6
Лучший ответ Сообщение было отмечено SaintSerg как решение

Решение

К сожалению, на вашем сайте в следующем блоке '<div class="togglebox1" style="display: none;"', нет свойства "position: relative".

Попробуйте проверить, всё в вашем коде до конца и если не чего не проясниться, попробуйте прочитать следующую тему: http://htmlbook.ru/css/z-index

Добавлено через 3 минуты
Напоминаю, чем больше значение z-index, тем оно находиться выше других блоков и других элементов.

Добавлено через 6 минут
А также попробуйте, заменить в вашем главном CSS коде "Классы для JS".

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/*Классы, для js*/
.togglebox1 {
/*  background-color:#CCC;
    border: 1px solid #a9a9a9;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px; */
    overflow: hidden;
    font-size: 1.2em;
    width: 150px;
    clear: both;
    margin-bottom:10px;
    background: rgba(192, 192, 201, 1);
    border: solid 1px #000;
    border-top: 0px;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin-left: -11px;
    z-index: 2000;
    position: relative;
    
}
.togglebox1 .block {
    padding: 20px;
    z-index: 2000;
}
1
0 / 0 / 0
Регистрация: 25.01.2014
Сообщений: 9
02.02.2014, 19:41  [ТС] 7
CSS
1
2
3
4
5
6
7
8
9
10
11
12

.eda {
width: 150px;
height: 200px;
background: rgba(192, 192, 201, 1);
border: solid 1px #000;
border-radius: 10px;
padding: 10px;
margin: 15px;
float: left;
z-index: 100;
position: relative;
}
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*Классы, для js*/
.togglebox1 {
    overflow: hidden;
    font-size: 1.2em;
    width: 150px;
    clear: both;
    margin-bottom:10px;
    background: rgba(192, 192, 201, 1);
    border: solid 1px #000;
    border-top: 0px;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin-left: -11px;
    z-index: 2000;
    position: relative;
}
.togglebox1 .block {
    padding: 20px;
    z-index: 3000;
    position: relative;
}
Вот по вашему совету прописал позицию и z-index.
в CSS
....
Статью прочитал, все логично, вроде бы все сделано по правилам.
в HTML к каждому классу togglebox1 добавил позицию relative и на всякий случай z-index))))))
результат тот же. не получается верхний див поместить над нижним. Может это происходить из-за JS просто знаний у меня минимум, все делаю по примерам.
вот HTML
верхний ряд!
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13

    <div class="box visible">
        <div>Что бы прочитать описание блюда кликните по картинке, что бы добавить блюдо в заказ, кликните по цене.</div>
<!-- Карточка товара -->
        <div class="eda" style="position: relative; z-index: 100;">
        <p class="name_eda">Салат "Капрезе"</p>
        <p class="pic_eda"><img src="images/1.jpg"></p>
        <div class="togglebox1" style="position: relative;">
            <div class="block" style="position: relative;">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
Нижний ряд
HTML5
1
2
3
4
5
6
7
8
9
10
11
12

<!-- Карточка товара -->
        <div class="eda">
        <p class="name_eda">Салат "Капрезе"</p>
        <p class="pic_eda"><img src="images/1.jpg"></p>
        <div class="togglebox1" style="position: relative; z-index: 2000;">
            <div class="block" style="position: relative; z-index: 3000;">
                Классический Итальянский салат. (Сыр "Моцарелла", помидор, зелень)
            </div>
        </div>
        <div id="price">275 руб.</div>
        </div>
<!-- Карточка товара -->
0
12 / 12 / 6
Регистрация: 01.09.2013
Сообщений: 125
02.02.2014, 19:51 8
Лучший ответ Сообщение было отмечено SaintSerg как решение

Решение

Попробуйте загрузить архив, по следующей ссылке: HTML&CSS.rar

И запустите файл index.html, у себя на компьютере, через браузер Google Chrome или Mozilla Firefox.
 Комментарий модератора 
Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251
1
0 / 0 / 0
Регистрация: 25.01.2014
Сообщений: 9
02.02.2014, 20:03  [ТС] 9
Бесполезно, не работает.
не могу понять в чем причина, весь код по строчкам перебрал.
еще раз привожу полный листинг CSS
может быть проблема не в классе toggle1 и eda, а где-то ранее? Этот CSS я взял со скриптом вкладок.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

* {margin: 0; padding: 0;}
body {margin: 30px; font: 13px/1.5 "Trebuchet MS", Tahoma, Arial;}
a {color: #0094D6;}
p {padding: 7px 0;}
h1 {font-size: 21px; font-weight: normal; margin: 0 0 30px;}
 
.section {
    width: 800px;
    background: #EFEFEF;
    margin: 0 0 30px;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}
.box {
    display: none;
    border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
 
}
.box.visible {
    display: block;
 
}
 
.section.vertical {
    width: 900px;
    border-left: 160px solid #fff;
    border-radius: 0 15px 15px 15px;
}
.vertical .tabs {
    width: 160px;
    float: left;
    display: inline;
    margin: 0 0 0 -160px;
}
.vertical .tabs li {
    padding: 0 13px;
    margin: 0 0 1px;
    border: 1px solid #E4E4E4;
    border-right: 1px solid #F9F9F9;
    width: 132px;
    height: 25px;
}
.vertical .tabs li:hover {
    width: 131px;
}
.vertical .tabs li.current {
    width: 133px;
    color: #444;
    background: #EFEFEF;
    border: 1px solid #D4D4D4;
  border-right: 1px solid #EFEFEF;
  margin-right: -1px;
    border-radius: 5px 0 0 5px;
}
.vertical .box {
  border-width: 1px;
    border-radius: 0 15px 15px 15px;
    float: left;
}
.eda {
width: 150px;
height: 200px;
background: rgba(192, 192, 201, 1);
border: solid 1px #000;
border-radius: 10px;
padding: 10px;
margin: 15px;
float: left;
z-index: 100;
position: relative;
}
.name_eda {
height: 50px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 14pt;
line-height: 0.9em;
}
.pic_eda {
text-align: center;
border-radius: 5px;
cursor: pointer;
}
#price {
font-family: 'PT Sans Narrow', sans-serif;
font-weight: bold;
font-size: 16pt;
background: #999;
border-radius: 5px;
border: solid 1px #000;
padding: 0 5px 0 5px;
color: #fff;
text-align: center;
margin-top: 10px;
cursor: pointer;
}
.sidebar {
position: relative;
font-family: 'PT Sans Narrow', sans-serif;
width: 200px;
height: 500px;
background: rgba(239, 239, 239, 1);
border: solid 1px #D4D4D4;
border-radius: 10px;
padding: 10px;
float: right;
 
}
/*Классы, для js*/
.togglebox1 {
    overflow: hidden;
    font-size: 1.2em;
    width: 150px;
    clear: both;
    margin-bottom:10px;
    background: rgba(192, 192, 201, 1);
    border: solid 1px #000;
    border-top: 0px;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    margin-left: -11px;
    z-index: 2000;
    position: relative;
 
 
    
}
.togglebox1 .block {
    padding: 20px;
    z-index: 3000;
    position: relative;
}
Добавлено через 4 минуты
ООООО, отлично, пока не нашел разницы в CSS огромное спасибо, все работает!!!!

Добавлено через 1 минуту
Спасибо, все работает, смотрю разницу в CSS!!!
0
02.02.2014, 20:03
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 02.02.2014, 20:03
Помогаю со студенческими работами здесь

Как работает url такого типа index.php/reg/index
Мне интересно как это работает. И в каких случаях это пригодится. Встречал такой url в cms. Я...

Не работает команда INDEX при любых вариантах
Всем привет! Постораюсь быть кратким, думаю для Вас ответ не создаст проблем. Для меня же...

Моноблок не видит второй монитор под Windows, при этом под Linux работает
Всем доброго, Такой вопрос, есть моноблок Lenovo Ideacentre AIO 720 (Core i5-7400 с...

Как можно прописать, чтобы при открытии домена в браузере по умолчанию открывался не index.html, а index.php?
Добрый день! Подскажите, как можно прописать, чтобы при открытии домена в браузере по умолчанию...

Компьютер при загрузке останавливается при появлении надписей f1,f2 и DEL SETUP
проблема в загрузке компа, при включении загрузка останавливается при появлении надписей f1,f2 и...

Компьютер выключается при загрузке Windows при появлении Logon screen
Здравствуйте! При включении компьютера после того, как он был выдернут из розетки, загрузка...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru