Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Изменение свойства z-index.

Всем привет. Есть код.
$(document).ready(function () {
	$('#mobile-one').on('click', function (e) {
		e.preventDefault();
		$('#mobile-block-one').fadeToggle(500).css("display", "block");
	});
});

Из кода ясно что клик по блоку <div id="mobile"></div> открывает скрытый блок <div id="mobile-block"></div> и при повторном нажатии скрывает его.

Однако задача достаточно специфичная. Таких блоков несколько. То-есть несколько кнопок для открытия блоков и самих блоков несколько (пускай у них будут id mobile-block-one и mobile block-two).

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

Однако если у первого блока поставить z-index: 1; тогда уже первый блок всегда будет наложен на второй блок.

Вопрос: Как менять значение z-index, чтобы открываемый блок всегда имел значение z-index больше чем у уже открытого блока и как это реализовать через jQuery ???

PS: В качестве варианта предполагаю только такой вариант измениея я z-index (открыть, закрыть блок) (1, 0, 3, 2, 6, 5, 10, 9, 15, 14, 21, 20).
Ответ:
<style>
#mobile-block-one {
     position: relative;
     z-index:10;
}
</style>
<div id="mobile-one">
   <div id="mobile-block-one">A<div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
   $('#mobile-one').on('click',function(){
          var el = $('#mobile-block-one');
          if(el.attr('data-click-state') == 1) {
             el.attr('data-click-state', 0)
             el.css('z-index', +el.css('z-index') + 1)
          } else {
             el.attr('data-click-state', 1)
             el.css('z-index', +el.css('z-index') - 3)
          }
	});
});
</script>
Вопрос: z-index дочернего элемента

Подсажите, есть код примерно такой

<div class="section_one">
<div class="child_one">
</div>
</div>

<div class="section_two">
<div class="child_two">
</div>
</div>


Мне надо, чтоб child_two было над бэкграундом section_one и под child_one.
как это сделать?
Экспериментирую с z-index. не выходит никак
Ответ: z-index действует только для позиционированных элементов, то есть таких, у которых есть position в css-правиле.
Вопрос: Z-index и позиционирование

Доброго времени суток, уважаемые форумчане!

Не могу отпозиционировать блоки нужным образом по Z. Изменение z-index не помогает. Вертел значения и так и эдак.
Есть два блока, "ближний" и "дальний" (подписано по линку). Ближний должен перекрывать дальний. Есть, конечно, кэпское решение поменять их местами, но, полагаю, не путь джедая верстать сначала контент, а потом хидэр.

Читал в справочнике про z-index и, если правильно понял, то чем больше значение, тем "ближе" блок. Но пробовал менять по разному, результата не наблюдается.

Заранее спасибо

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="first">
  <p>
    Ближний блок
  </p>
</div>
 
<div id="second">
  <p>
    <br>Дальний блок
  </p>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
  height: 50px;
  margin: 0 auto;
  width: 100px;
}
 
p {
  margin: 0;
}
 
#first {
 background-color: #f00; 
 z-index: 1;
}
 
#second {
  background-color: #0f0;
  position: relative;
  top: -10px;
  left: -30px;
  z-index: auto;
}
Ответ: bogdan_017, по умолчанию position определен как static. А с ним z-index не работает. z-index работает только с position absolute, fixed и relative.
Вопрос: Z-index не работает

Всем привет! Народ, есть у меня страничка: . Там есть раздел "История компании". Там слайдер. У этого слайдера есть "пагинатор" - кругляши для перехода между стлайдами. Мне надо между этими кругляшами линию красную разместить, да так, чтобы линия была на заднем плане, а сами кругляши - на переднем. Как я только с z-index не игрался, не помогает. И позиционировать пробовал, и opacity менять пробовал, всё никак не могу это сделать. Народ, кто знает, помогите пожалуйста.
Ответ: Вы гений, спасибо большое !!!
Вопрос: Z-index не работает в Mozilla

Есть выпадающее меню со свойством z-index.
Есть html 5 видео.
При открытие во всех браузерах кроме Mozilla выпадающее меню открывается поверх видео(как и должно быть).
И только в Mozilla меню открывается под видео.
На всех остальных страничках(где нету видео) все нормально.
В чем может быть проблема?
Вот свойства для меню
CSS
1
2
3
4
5
6
7
8
9
10
11
12
.menu ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 637px;
    padding: 20px 0;
    border: 1px solid #2b2b2b;
    background-color: rgba(25,25,25,.85);
    text-align: left;
    z-index: 10;
    display: none;
}
Ответ: TanyaRomanyuk, у вас есть возможность показать код страницы полностью?
Вопрос: Ссылки ушли под слой, z-index не помогает

Добрый день! Учусь немного верстать, хотелось сделать, чтобы меню и блоки при прокрутке были зафиксированными. После добавления position: fixed ссылки перестали быть кликабельными. Перепробовала различные комбинации z-index, но все равно не получается.
До этого они были спозиционированы иначе, все работало. Ссылка на неработающие ссылки:

Ссылки на версию, где ссылки еще работают, но меню не двигается:

Заранее спасибо за помощь (или подсказку)
Ответ: В z-index стоит всегда помнить что они взаимодействуют внутри родительского блока. Вот к примеру есть 2 родительских блока, которые друг друга перекрывают. У одного стоит z-index:10, у другого 5. Так вот какие бы я z-index не ставил детям блока с индексом 5 они не будут перекрывать блок с индексом 10. Вот наглядный пример

HTML5
1
2
3
4
5
6
7
<div class="a1">
    <div class="inner1"></div>
</div>
<div class="a2">
    <div class="inner2"></div>
    <div class="inner3"></div>
</div>
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
.a1{
    width:200px;
    height:200px;
    background-color:blue;
    position:relative;
    z-index:10;
}
.inner1{
    position:absolute;
    right:10px;
    bottom:10px;
    background-color:red;
    width:50px;
    height:50px;
    z-index:1;
}
.a2{
    width:200px;
    height:200px;
    background-color:yellow;
    position:relative;
    margin:-25px 0 0 50px;
    z-index:5;
}
.inner2{
    position:absolute;
    right:10px;
    top:10px;
    background-color:green;
    width:70px;
    height:70px;
    z-index:999;
}
.inner3{
    position:absolute;
    right:20px;
    top:60px;
    background-color:pink;
    width:70px;
    height:70px;
    z-index:99;
}
Вопрос: datepicker jquery-ui fancybox z-index

Добрый день!

На странице подключена возможность редактирование отдельных блоков в окнах fancybox.

В открывающемся окне fancybox подключен datepicker jquery-ui.

Выявлены следующие глюки

1. Открываю окно fancybox , datepicker jquery-ui работает, календарь открывается. Закрываю окно fancybox и опять открываю, datepicker jquery-ui не работает

2. Если в родительском окне есть элемент datepicker jquery-ui, то при открытии с родительского окна fancybox, datepicker jquery-ui так же не работает.


То, что нарыл указывает на z-index.
Пробовал явно в стилях прописать
#ui-datepicker-div {z-index: 10000 !important;}


не помогает, т.к. при просмотре исходника в работающем окне, у div datepicker jquery-ui стили прописываются прямо в коде и выглядит вот так:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 451px; left: 699px; z-index: 8031; display: block;">



т.е. он перекрывает мой стиль в css

В свою очередь у fancybox значение z-index колеблется в диапазоне 8030-8060

Попробовал изменить значение в стилях у fancybox, но не помогло -(

Может кто подскажет еще решение?
Ответ: хороший пример, буду копаться в своем коде, видимо точно, что-то не договариваю...

Спасибо!
Вопрос: Не работает z-index

Верстаю адаптивную версию сайта и столкнулся со следующей проблемой: z-index кнопки слайдера равен 5, а z-index адаптивного меню я каким бы большим я ни делал, всё равно оно оказывается под кнопкой. Почему так может быть?

Код 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
.user_nav {
  position: relative;
  left: 10px;
  width: 100%;
  z-index: 66666; }
  @media screen and (max-width: 680px) {
    .user_nav {
      position: fixed;
      display: none;
      left: 0; }
      .user_nav.toggle_mod {
        display: none !important; }
      .user_nav .user_nav_item {
        width: 100%;
        text-align: center;
        background-color: #ae8370;
        z-index: 6; }
        .user_nav .user_nav_item .user_nav_link {
          color: #fff;
          padding: 0; } }
  .user_nav .user_nav_item {
    padding-right: 20px; }
    @media screen and (max-width: 680px) {
      .user_nav .user_nav_item {
        padding-right: 0;
        border-bottom: 1px solid #72574b; } }
    .user_nav .user_nav_item:last-child {
      padding-right: 0; }
    .user_nav .user_nav_item .user_nav_link {
      font-size: 14px;
      display: block;
      position: relative;
      padding: 13px 10px;
      -moz-transition: all 200ms ease !important;
      -webkit-transition: all 200ms ease !important;
      transition: all 200ms ease !important; }
      @media screen and (max-width: 680px) {
        .user_nav .user_nav_item .user_nav_link:hover, .user_nav .user_nav_item .user_nav_link.active_mod, .user_nav .user_nav_item .user_nav_link.active_link_mod, .user_nav .user_nav_item .user_nav_link:active {
          background-color: #ce957c; } }
      .user_nav .user_nav_item .user_nav_link:hover:before, .user_nav .user_nav_item .user_nav_link.active_mod:before, .user_nav .user_nav_item .user_nav_link:hover:after, .user_nav .user_nav_item .user_nav_link.active_mod:after, .user_nav .user_nav_item .user_nav_link.active_link_mod {
        content: '';
        position: absolute;
        height: 3px;
        bottom: 0;
        left: 0; }
      .user_nav .user_nav_item .user_nav_link:hover:before, .user_nav .user_nav_item .user_nav_link.active_mod:before {
        width: 10px;
        background-color: #72574b;
        z-index: 222; }
        @media screen and (max-width: 680px) {
          .user_nav .user_nav_item .user_nav_link:hover:before, .user_nav .user_nav_item .user_nav_link.active_mod:before {
            width: 100%; } }
      .user_nav .user_nav_item .user_nav_link:hover:after, .user_nav .user_nav_item .user_nav_link.active_mod:after {
        width: 100%;
        background-color: #ae8370; }
      .user_nav .user_nav_item .user_nav_link:hover, .user_nav .user_nav_item .user_nav_link.active_mod {
        text-shadow: 1px 0 0 #ae8370; }
 
.slider_btn_block {
  justify-content: flex-start;
  position: absolute;
  left: calc(50% - 85px);
  top: 250px;
  z-index: 5; }
  .slider_btn_block:before {
    content: '';
    height: 96px;
    width: 1px;
    background-color: #f2824e;
    box-shadow: 1px 0 0 #ff9564;
    position: absolute;
    z-index: 25;
    left: 84px;
    top: -22px; }
  .slider_btn_block .butt_hexagon_left {
    position: relative;
    -moz-transition: all 200ms ease !important;
    -webkit-transition: all 200ms ease !important;
    transition: all 200ms ease !important; }
    .slider_btn_block .butt_hexagon_left:before, .slider_btn_block .butt_hexagon_right:before {
      content: '\f053';
      color: #fff;
      font-size: 28px;
      -webkit-transform: rotateZ(90deg);
      -ms-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
      line-height: 60px;
      position: absolute;
      left: 19px;
      top: -5px;
      -moz-transition: all 200ms ease !important;
      -webkit-transition: all 200ms ease !important;
      transition: all 200ms ease !important;
      -moz-transition: text-shadow 200ms ease !important;
      -webkit-transition: text-shadow 200ms ease !important;
      transition: text-shadow 200ms ease !important; }
    .slider_btn_block .butt_hexagon_left:hover {
      opacity: 0.95; }
    .slider_btn_block .butt_hexagon_left:hover:before, .slider_btn_block .butt_hexagon_right:hover:before {
      opacity: 0.95;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); }
  .slider_btn_block .butt_hexagon_right {
    position: relative;
    left: -70px;
    -moz-transition: opacity 200ms ease !important;
    -webkit-transition: opacity 200ms ease !important;
    transition: opacity 200ms ease !important; }
    .slider_btn_block .butt_hexagon_right:hover {
      opacity: 0.95; }
 
.slider_btn_block .butt_hexagon_left {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-bottom: 50px solid #ff8952;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 60px;
  z-index: 15;
  -webkit-transform: rotateZ(-90deg);
  -ms-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
  display: block; }
 
.slider_btn_block .butt_hexagon_right {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-bottom: 50px solid #ff8952;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 60px;
  z-index: 15;
  -webkit-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
  display: block; }
Ответ:
Сообщение от xDanbo
Fedor92, я и у хэдера попутно убрал z-index, когда кнопки чистил Видать, в нём и было всё дело.
Бинго!
Вопрос: Z-index с position relative отказывается что-то делать

Добрый вечер. Решил переписать стили и сделать более менее адаптивный сайт под разные экраны устройств. Конечно, сделать это не возможно без javascript, но многое изменить можно.

Есть такая верстачка (многое вырезано):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section id="search-form">
  <form>
    <div>
      <span>Left</span>
      <input type="search">
    </div>
    <div id="search-form-center">
      <div id="background-rotate"></div>
      <div id="background-not-rotate"><input type="button" value="Кнопачке"></div>    </div>
    <div>
      <span>Right</span>
      <input type="search">
    </div>
  </form>
</section>
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
#search-form form > div {
    display: inline-block;
    vertical-align: middle;
}
#search-form form > div, #search-form form > div input[type="search"]{
    text-align: center;
}
 
#search-form form > div input {
    display: block;
    height: 28px;
    width: 200px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.0175) inset;
    font-size: 16px;
    margin: 5px;
}
#search-form form > div span {
    color: black;
    font-size: 21px;
}
#search-form #search-form-center > div {
  position: relative;
}
 
#search-form #search-form-center #background-rotate {
  z-index: 1;
  border: 110px solid;
  border-color: green yellow red blue;
}
 
#search-form #search-form-center #background-not-rotate {
  z-index: 2;
}
Мне нужно, чтобы #background-rotate и #background-not-rotate были четко по середине, и #background-rotate был задним фоном у кнопки. Как видно из названия, он (задний фон) будет еще и поворачиваться...

Проблема в том, что z-index никак не хочет работать при таких данных, независимо от position: relative.
Что можно сделать, чтобы идея адаптивного сайта осталась и при этом #background-rotate стал задним фоном #background-not-rotate?
Ответ:
CSS
1
2
3
4
5
6
7
8
#search-form #search-form-center #background-rotate {
  border: 110px solid;
  border-color: green yellow red blue;
}
 
#search-form #search-form-center #background-not-rotate {
    top: -130px;
}
при ваших стилях z-index не нужен

Сообщение от darksector
Конечно, сделать это не возможно без javascript
js для адаптивности используется в крайних случаях, в основном используют @media запросы в css
Вопрос: Hover, z-index

Доброго времени суток! (:
Столкнулся с проблемой... Есть блок, при наведении на который появляется менюшка. display: none/inline-block не подходит, visibility: hidden/visible тоже, поэтому пробую играться со слоями: z-index. Вопрос заключается в следующем, можно ли при наведении поменять z-index элемента, который не является дочерним элементом?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="header">
    <div class="block">
        Блок, при наведении на который должен поменяться z-index внешнего,<br />
        не дочернего элемента с классом main
        <div class="listing">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>...</li>
                <li>n-1</li>
                <li>n</li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    Собственно, элемент с классом main
</div>
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
.listing {
    text-transform: none;
    position: relative;
    z-index: 0;
    display: inline-block;
    opacity: 0;
    line-height: 20px;
    margin: -111px 0 0 -1px;
    padding: 146px 0 30px 34px;
    width: calc(100% + 2px);
    background: rgba(247,247,247,.9);
    -webkit-transition: all .2s ease-out;
       -moz-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
}
 
.block:hover > .listing {
    opacity: 1;
    z-index: 4;
    padding: 186px 0 30px 34px;
    -webkit-transition: all .2s ease-out;
       -moz-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
}
 
.main {
    position: relative;
    z-index: 0;
    background: #fff;
    height: 1300px;
}
 
.block:hover > main {
    z-index: 4;
}
Привел для примера. Как можно изменить z-index элемента, который не является дочерним? JS совсем не хотелось бы сюда впутывать... Заранее спасибо!
Ответ:
Сообщение от Mr Coder
Если я вас правильно понял, то при наведении на шапку изменить z-index у блока main получится следующим образом:
CSS
1
.header:hover + .main{z-index: 100;}
Пример
Да! Шикарное решение! Спасибо!