Absolute positioning on play buttons

HTML & CSS
21

Both code snippets are saying the same thing, the top snippet gets it done in three rulesets instead of four.

22

The one with 3 rulesets requires the addition of z-index: auto;.

Whereas the one with 4 rulesets doesn’t

.pausee {
  left: 0;
  z-index: auto;
}
23

If I would follow the flow of it, how would it look?

Set up like this:

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}

or reversed?

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}
24

I might say this way because these 2 classes are in relation to each other.

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

This would be characterized as an extra added class that would get added on last, at the end. After the .pause class.

If I have this correct, in what I’m saying.

.activee .playe {
  z-index: auto;
}

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}
25

Wait a second:

.activee .playe {
  z-index: auto;
}

is in relation to:

  z-index: -1;
}

Which puts it above the .pause class.


.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}
26

Which comes first?

I’m trying to figure this out.

.play,
.pause {
}

.active .play {
}

.pause {
}

or

.play,
.pause {
}

.pause {
}

.active .play {
}
28

The last rule you write will override an earlier rule for the same selector(s), so where you need one rule to override another, makes sure it comes later in the CSS.

Other than that, structure your CSS rules in a way which makes sense to you, which will make it easy for you to read and maintain your code at a later stage.

As will many things in CSS, there is no absolute right and wrong for all situations. As a general rule, you should avoid repeating yourself - keep your CSS as short and simple as you can - but don’t do it at the expense of clarity or ease of reading.

1 Like
29

What would be the equivalent to the order of this set up?
This is how it was originally.

.playe {
  position: absolute;
  left: 6px;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}

.activated .playe {
  z-index: auto;
}

.pausee {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Code 1

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}

or

Code 2

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}
30

Your codes one and two are using different class names from the original code, and without any accompanying HTML, who can say what’s right and what isn’t.

Did you test your updated versions? Do they give the result you want?

31

I don’t think I was asking a difficult question.

Code 1


.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}

Code 2

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}

I just wanted to know what would be equivalent to this order.

.playe {
  position: absolute;
  left: 6px;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}

.activated .playe {
  z-index: auto;
}

.pausee {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
32

Which is probably why you didn’t get a difficult answer.

1 Like
33

I don’t think you understood what my question was.

The question that I asked wasn’t answered.

34

First rule-set

.playe,
.pausee {
{

Would this come next, after the first rule-set

 .pausee {
  left: 0;
  z-index: auto;
}

or would this come next?

.activee .playe {
  z-index: auto;
}

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}
35

I think I understand the question, but my answer is Why?

As an analogy, I could keep my car on the road with tape, foil, wire and a few clamps. But shouldn’t I really fix the exhaust system and steering linkage.

Nothing personal, but I think you are having trouble learning the “big picture” by focusing on the “trees” in an improperly managed “forest”.

IMHO you would greatly benefit by taking steps back for a while. I strongly suggest you create a bare minimum HTML file on your computer and experiment with as few simple elements and CSS rules as possible changing things a lot, but always keeping the file as simple as possible. eg. change only one thing at a time

<html> 
  <head> 
    <title>Testing page</title>
    <style>
      .test_element { 
        outline: 1px solid #F00;
      }
    </style> 
  </head> 
  <body> 
    <div class="test_element">Lorem Ipsum foobar</div>
  </body>
</html>

Maybe try different padding font, etc. and see what happens. Maybe add another element and try different margins and borders. The point is, try a lot of different things, but keep it simple.

True, it isn’t the goal, but if one thing breaks it will only be one thing at a time.

2 Likes
36

Nothing breaks if it is like this,

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}

or like this.

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}
37

I just wanted to know, to follow the flow.

.playe,
.pausee {
{


.pausee {
  left: 0;
  z-index: auto;
}

.activee .playe {
  z-index: auto;
}

or this:

.playe,
.pausee {
{

.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}
38

Should .activee .playe come before .pause

or should it be placed after .pause?



.activee .playe {
  z-index: auto;
}

.pausee {
  left: 0;
  z-index: auto;
}
39

I pretty much said the same thing here.
Got the same results too, no reply and back to more questions.

The only way to really learn is to write some code on your own. As a person is reading through the reference on any given subject, write code as you read, then see what you just learned come to life on the screen. At that point they retain what was just learned.

1 Like
40

That dealt with something entirely different.

41

All I’m asking here, is which would be the 2nd rule-set.

first rule-set

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  z-index: -1;
}

Of these which would be the 2nd rule-set?

.activee .playe {
  z-index: auto;
}

or


.pausee {
  left: 0;
  z-index: auto;
}