If that’s the case, I’m really not sure what the question is. Isn’t that evidence enough that it’s needed on both elements in this case?
2 Likes
Like this???
.playButtonsc {
position: fixed;
width: 260px;
height: 44px;
background-color: black;
border: 3px solid #0059dd;
}
.playButtonc {
position: relative;
float: left;
width: 83px;
height: 44px;
cursor: pointer;
overflow: hidden;
}
Well that IS why position: relative; is needed 
If you remove it from .playButtonc the left and right buttons disappear
If you remove it from .playButtonsc the lines hang out
2 Likes
How come this one only needs 1 position: relative?
Well it has different HTML so the css is styled to match it accordingly.
You missed class that day and didn’t complete your homework
The other one has this
<div class="lines"></div>
When positioning like this it’s not the same css all the time, as you’ve already seen sometimes z-index has to be negative
EDIT:
@asasass
See if this site can help you in your spare time
http://learnlayout.com/position.html
http://learnlayout.com/
1 Like
As Ray.H said, the HTML is structured differently. Therefore, to achieve the same behavior, the CSS would very likely have to be different to work with the HTML.
You seem to forget that there are very few black and white, always and never rules of coding. That is why we are puzzled by your determination to find always right vs never right patterns of code. CSS works with the HTML and there are usually several ways to achieve the desired results. Learning how to use HTML and CSS is more productive, has more future, than collecting snippits of black and white code that someone else has written for you.
2 Likes
Even with lines removed, relative is needed on both still:
It’s hard to keep up with all your fiddles.
A lot of times if your copying and pasting bits of code from one layout to another you will get rules mixed in that you don’t need.
If you don’t know why they were put in there it will to this type confusion that you are going through now.
You must write some real LAYOUT code (not font styling) on your own so you can learn from your own mistakes. It does not help you learn if we write the layout code for you because you don’t understand it yet.
See the links I posted above, and also do the “My First Webpage” that we all went through when we were learning
2 Likes
So what?
Without
.Lines Absolute:
play/pause
Relative Twice
With
.Lines Absolute:
Absolute: play/pause
Relative Twice
Absolute: 2 lines
Margin: play/pause
Relative Once
https://jsfiddle.net/6bu75LLm/1/
When you start in inquery like this, you are usually trying to prove something or fish someone into writing some code for you. What are you trying to do this time that hasn’t already been done?
IF the HTML in those 3 fiddles is different, one can expect the CSS to be different. So what?
Please tell us what you are trying to achieve.
The 1st two are most similar to each other, the 3rd one is different.
From My post #106
If you remove it from .playButtonc the left and right buttons disappear
If you remove it from .playButtonsc the lines hang out
If you remove it from .playButtonc the left and right buttons disappear
If you remove it from .playButtonsc the lines hang out
Same results because the .lines div is not styled in the css. You are only using it for :before and :after pseudos.
The nearest positioned ancestor for .lines is .playButtonsc, so the AP pseudos are relative to .playButtonsc. That is why relative is needed on .playButtonsc
You would learn that if you would read about the containing block
Absolute: 2 lines
Margin: play/pause
Relative Once
https://jsfiddle.net/6bu75LLm/1/
The lines are pseudos of the main container
.playButtonsc {
width: 266px;
height: 50px;
position: relative;
overflow: hidden;
.playButtonc::before,
.playButtonc::after {
content: “”;
position: absolute;
top: 0;
left: 86px;
width: 3px;
height: 100%;
background: #0059dd;
}
1 Like
Absolute is used on play/pause here, and also on the lines.
Only 1 relative is used.
It doesn’t matter between one fiddle or the other
The Final Verdict is that AP children are positioned to their NEAREST ancestor with position:relative
3 Likes
Can a transition effect be applied to the background image and the lines in this circumstance, or no?
.initiale {
width: 266px;
height: 174px;
background: url("https://i.imgur.com/MbJ5O2d.png")no-repeat;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.initiale::before,
.initiale::after {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 3px;
height: 100%;
background: #0059dd;
}
.initiale::after {
left: 177px;
}
Is there a reason why it’s z-index: 2;, and not, z-index: 1; ?
Did you make a mistake?
z-index: 2;
z-index: 1;
Well I do see now that …
.playf,
.pausef {
position: relative;
z-index: 2;
}
Were elements that were lower in the page source so that gives them a higher stacking level.
It would have worked with z-index:1 for that reason.
I probably gave it 2 to make insure your titles were showing.
All you need to know about stacking levels is right here
1 Like
Because this is one:
svg.stack {
position: relative;
z-index: 1;
This one gets 2:
.playf,
.pausef {
position: relative;
z-index: 2;
}
But,
svg.stack {
position: absolute;
z-index: 1;
stroke-width: 6;
stroke: #89cff0;
fill: #000000;
}
has no relation to:
.playf,
.pausef {
position: relative;
z-index: 2;
}
Aren’t they separate entities?