OnClick transition effects, and understanding the markup code


#104

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?


#105

Like this???
https://jsfiddle.net/t4kpkgr0/107/

.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;
}

#106

Well that IS why position: relative; is needed :banghead:

If you remove it from .playButtonc the left and right buttons disappear

If you remove it from .playButtonsc the lines hang out


#107

How come this one only needs 1 position: relative?
https://jsfiddle.net/6bu75LLm/1/


#108

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/

https://learn.shayhowe.com/html-css/


#109

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.


#110

Even with lines removed, relative is needed on both still:
https://jsfiddle.net/t4kpkgr0/117/


#111

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


#112

So what?


#113

Without
.Lines Absolute:
play/pause
Relative Twice
https://jsfiddle.net/t4kpkgr0/117/

With
.Lines Absolute:
Absolute: play/pause
Relative Twice
https://jsfiddle.net/t4kpkgr0/71/

Absolute: 2 lines
Margin: play/pause
Relative Once
https://jsfiddle.net/6bu75LLm/1/


#114

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.


#115

The 1st two are most similar to each other, the 3rd one is different.


#116

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;
}


#117

Absolute is used on play/pause here, and also on the lines.
Only 1 relative is used.
https://jsfiddle.net/1td7z57n/


#118

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


#119

Can a transition effect be applied to the background image and the lines in this circumstance, or no?
https://jsfiddle.net/kjuqgcw4/16/

.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;
}

#120

Is there a reason why it's z-index: 2;, and not, z-index: 1; ?

Did you make a mistake?

z-index: 2;
https://jsfiddle.net/a6yzkyfn/5/

z-index: 1;
https://jsfiddle.net/a6yzkyfn/4/


#121

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


#122

Because this is one:

svg.stack {
  position: relative;
  z-index: 1;

This one gets 2:

.playf,
.pausef {
  position: relative;
  z-index: 2;
}

#123

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?