Oddities with CSS and layers — why is this happening?

Good day,

I'm trying to create a small slider (this is a teaching example for my future books on HTML/CSS/JS).
Everything was fine, but at some point began the strange behavior in terms of overlapping blocks, which I can not understand. Perhaps the answer lies somewhere in the bowels of the standard? The huge request to prompt, what's the problem, or at least where to read to figure it out.

So there are the following markings:

<div id="main">
 <header><div id="logo"></div></header>
 <nav><a href="/" class="current">Home</a><a href="tours.html">Tours</a><a href="feedback.html">Reviews</a><a href="about.html">About us</a></nav>
<main>
 <p>Welcome to the tour operator's site "Kompas-Tour"!</p>
 <div id="slider_wrap">
 <div id="slider"><div class="left"></div><div class="right"></div><div class="film"></div></div>
 <div class="dots"></div>
</div>
</main>
<footer></footer>
</div>


...

 main {
 min-height: 530px;
 padding: 32px 28px 18px;
 font-family: Arial;
 font-size: 13px;
}
 main > h1 {
 font-family: Georgia;
 color: #c50;
 font-size: 24px;
 margin: 14px 0px 18px;
}
 footer {
 height: 38px;
}
 #slider_wrap {
 width: 510px;
}
 #slider {
 width: 510px;
 height: 290px;
 position: relative;
 overflow: hidden;
 margin-top: 18px;
}
 #slider .film {
 position: absolute;
 top: 0px;
 left: 0px;
 height: 100%;
 transition: left 1s;
 -moz-tranzition: left 1s;
 -o-transition: left 1s;
 -ms-transition: left 1s;
}
 #slider .film > a {
 display: block;
 text-decoration: none;
 border: none;
 float: left;
 width: 510px;
 height: 290px;
 position: relative;
}
 #slider .film > a > .title {
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 120px;
 height: 32px;
 background: rgba(0, 0, 0, 0.6);
 padding: 4px 16px;
 transition: opacity 0.8 s ease-in-out 0.2 s;
}
 #slider .film > a > .title > span {
 color: #fff;
 font-size: 20px;
 font-family: Verdana;
 text-shadow: 1px 0px #000;
}
 #slider_wrap > .dots {
 margin: -26px auto 0px;
 width: 160px;
 text-align: center;
 z-index: 1;
 position: relative;
}
 #slider_wrap > .dots > div {
 display: inline-block;
 width: 16px;
 height: 16px;
 margin: 2px;
}
 #slider_wrap > .dots > div > div {
 display: inline-block;
 border: 2px solid #fff;
 border-radius: 6px;
 width: 8px;
 height: 8px;
 margin: 0px 2px;

}
 #slider_wrap > .dots > div.active > div {
 background: #fff;
 }


It gives the following output:

5b51b238a9096236813139.png

I bring all the styles and scripts, just to explain what happens and what does not suit me.

Initially, the element with the class "dots" displays items that served as indicators of the current page slider. They were displayed as an inline-block elements, the content is centered via text-align. Then I made them clickable. Then I saw that clicking on them is not very convenient due to small size, and decided to wrap them in wrappers, in order to make a valid scope for the clicks a little more. And here the problems started.

The fact that initially I for the sake of flexibility (to be able to display these indicators and outside of the slider) did not invest the element with the class "dots" in the slider, and put it in a special element-wrapper. Then I decided to display it on top of the slider, and used the shift using margin-top in the upper side.

Question: why before I used the wrapper from the div-s inside the element "dots" element "dots" displayed on top slider and as soon as I introduced them - the slider started to block it, and it took a fairly trivial operation with z-index in order to fix this?

Two changes that I found: add the element c class="dots" position: relative (that is, pull it out of normal flow); add element with id="main" property z-index: -1; position: relative and the element with id="slider" z-index: -1 (the position: relative it already has, as id="film" inside it is absolutely positioned).

Question 2: I thought that using a negative z-index appear first, elements with negative indexes in ascending order, then the background, then the elements with position: static, then elements with zero and the positive indices. I thought so because I was able to sample to bring the element under the background, giving it a z-index of -1 (the background was translucent).

But now, having made all the manipulation that it took to fix the problem, this theory collapses: if I assign the element "slider" z-index of -1, it displays... the background of the element "main" (even if you set the item to "slider_wrap" your own background)! So why is this? When you create the element with z-index less than zero, it falls not only under the background of its parent, but also for the backgrounds of all ancestors (actually, not quite all, the background of the body element remains below the element "slider").

UPD: the second part of the question is partially cleared. If you add element with id="slider_wrap" position: relative; z-index: 0 and the element with id="slider" to assign a z-index of -1, it is also displayed correctly. What if you throw z-index: 0, then everything breaks again. And this makes sense, because specifying z-index on this element, I create a new context overlay, otherwise the context is above, apparently just on the element with id="main" (though I don't know why it - there is no specified z-index and that element is not even positioned).
June 3rd 19 at 19:35
1 answer
June 3rd 19 at 19:37
I think there is a trick to transparency, as strange as it may sound, here's an example:
https://codepen.io/wokster/pen/OwbYrK
try to clean 1st css instilled
div:first-child {
 opacity: .99; 
}

It would seem opacity. Here's an explanation:
https://habr.com/post/166435/
But I have no rules on transparency for the problem item... - marcelina.Scho commented on June 3rd 19 at 19:40
,
1. sorry saw background: rgba(0, 0, 0, 0.6);did not realize that it was the background
2. view what styles adds the script itself - Henderson_Beat commented on June 3rd 19 at 19:43
All figured out. The problem was my carelessness: in the old version of the page DIVS within the element "dots" stood relative positioning. Whether it happened to be there, whether the method of "spear" added. And in the new version, I have removed this rule, that has the problem. It is more correctly to set position: relative to their ancestor, which I did. - marcelina.Scho commented on June 3rd 19 at 19:46

Find more questions by tags HTMLCSS