Добрый вечер! Подскажите, пожалуйста, уже давно мучаюсь.
Почему Картинки отображаются поверх баннера на главной странице, Мазилла, Опера, все нормально показывает. У картинок(teacher) свойство relative; z-index:2, у баннера absolute:z-index:0
Но раньше всё нормально отображалось, проблемы возникли после замены баннера. Битрикс записывает свой код в файл style.css шаблона? Я скопировала старые стили, не помогло.
.teachers_wrap {
/* padding-top:50px; */
padding-top:50%;
}
/* Делаем так, чтобы при наведении фото преподавателя не перекрывало заголовок, а стояло под ним */
#teachers h3 {
position:relative;
z-index:1;
}
.teacher {
position:relative;
}
/* Имя преподавателя */
#teachers .teacher span.name {
bottom:auto;
right:auto;
left:50%;
top:0;
}
#teachers .teacher span a.pseudo {
font-size:80%;
border-bottom-style:dotted;
color:#999;
}
/* Стили для баббла */
#teachers .teacher span.bubble,
#teachers .teacher span.mirror_bubble {
display:none;
position:absolute;
top:auto;
bottom:100px;
width:10em;
left:80%;
padding:10px;
background:#ffd;
border:solid 1px #ddd;
font-size:90%;
text-indent:-1.3em;
padding-left:2.5em;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
#teachers .teacher span.bubble i.tail,
#teachers .teacher span.mirror_bubble i.tail {
position:absolute;
display:block;
width:0px;
height:0px;
font-size:0px;
left:15%;
bottom:-20px;
border-left:solid 15px #ddd;
border-bottom:dashed 20px transparent;
}
#teachers .teacher span.bubble i.tail .shad,
#teachers .teacher span.mirror_bubble i.tail .shad {
position:absolute;
display:block;
width:0px;
height:0px;
overflow:hidden;
font-size:0px;
left:-14px;
top:0px;
border-left:solid 12px #ffd;
border-bottom:dashed 18px transparent;
}
#teachers .teacher:hover span.bubble,
#teachers .teacher:hover span.mirror_bubble {
display:block;
z-index:2;
}
/* Развернутый в другую сторону баббл */
#teachers .teacher span.mirror_bubble {
left:auto;
right:80%;
}
#teachers .teacher span.mirror_bubble i.tail {
border-left:0;
border-right:solid 15px #ddd;
left:auto;
right:15%;
}
#teachers .teacher span.mirror_bubble i.tail .shad {
border-left:0;
border-right:solid 12px #ffd;
left:auto;
right:-14px;
}
/* При наведении на преподавателя ссылка с его именем смещается вверх */
#teachers .teacher:hover span.name {
top:-20px;
}
#teachers .teacher:hover span a.pseudo {
font-size:100%;
color:#4E79BF;
}
/* При наведении на преподавателя его фото немного увеличивается */
.teacher:hover img {
width:120%;
height:auto;
margin-left:-10%;
position:relative;
z-index:0;
}
Почему Картинки отображаются поверх баннера на главной странице, Мазилла, Опера, все нормально показывает. У картинок(teacher) свойство relative; z-index:2, у баннера absolute:z-index:0
Но раньше всё нормально отображалось, проблемы возникли после замены баннера. Битрикс записывает свой код в файл style.css шаблона? Я скопировала старые стили, не помогло.
.teachers_wrap {
/* padding-top:50px; */
padding-top:50%;
}
/* Делаем так, чтобы при наведении фото преподавателя не перекрывало заголовок, а стояло под ним */
#teachers h3 {
position:relative;
z-index:1;
}
.teacher {
position:relative;
}
/* Имя преподавателя */
#teachers .teacher span.name {
bottom:auto;
right:auto;
left:50%;
top:0;
}
#teachers .teacher span a.pseudo {
font-size:80%;
border-bottom-style:dotted;
color:#999;
}
/* Стили для баббла */
#teachers .teacher span.bubble,
#teachers .teacher span.mirror_bubble {
display:none;
position:absolute;
top:auto;
bottom:100px;
width:10em;
left:80%;
padding:10px;
background:#ffd;
border:solid 1px #ddd;
font-size:90%;
text-indent:-1.3em;
padding-left:2.5em;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
#teachers .teacher span.bubble i.tail,
#teachers .teacher span.mirror_bubble i.tail {
position:absolute;
display:block;
width:0px;
height:0px;
font-size:0px;
left:15%;
bottom:-20px;
border-left:solid 15px #ddd;
border-bottom:dashed 20px transparent;
}
#teachers .teacher span.bubble i.tail .shad,
#teachers .teacher span.mirror_bubble i.tail .shad {
position:absolute;
display:block;
width:0px;
height:0px;
overflow:hidden;
font-size:0px;
left:-14px;
top:0px;
border-left:solid 12px #ffd;
border-bottom:dashed 18px transparent;
}
#teachers .teacher:hover span.bubble,
#teachers .teacher:hover span.mirror_bubble {
display:block;
z-index:2;
}
/* Развернутый в другую сторону баббл */
#teachers .teacher span.mirror_bubble {
left:auto;
right:80%;
}
#teachers .teacher span.mirror_bubble i.tail {
border-left:0;
border-right:solid 15px #ddd;
left:auto;
right:15%;
}
#teachers .teacher span.mirror_bubble i.tail .shad {
border-left:0;
border-right:solid 12px #ffd;
left:auto;
right:-14px;
}
/* При наведении на преподавателя ссылка с его именем смещается вверх */
#teachers .teacher:hover span.name {
top:-20px;
}
#teachers .teacher:hover span a.pseudo {
font-size:100%;
color:#4E79BF;
}
/* При наведении на преподавателя его фото немного увеличивается */
.teacher:hover img {
width:120%;
height:auto;
margin-left:-10%;
position:relative;
z-index:0;
}