Absolute Positioning elements

HTML & CSS
41

If you can show me an example, then I will be able to understand.

42

The Moderators decided to suspend a member’s account. Later that day the Admin decided to override their decision and unsuspend the account.

43

You’re going to suspend my account?

That was not a good example.

Which means, they undid the previous decision that was made.

44

No. And yet you do now understand what override means.

3 Likes
45

There is an example of overriding a rule which comes from your own code and which l explained to you here:

Getting initial to work at the top of the code? - #300 by TechnoBear

2 Likes
46

Before I didn’t have a left position on here, it wasn’t added at all.

As you can see here:

.grade ::before,
.grade ::after {
  content: '';
  position: absolute;
  top: 0;
  width: 15px;
  height: 44px;
  box-sizing: border-box;
}

Here I added a left position on to it, which I’m supposed to do, right?

I’m not so sure I’m supposed to do this.

.grade ::before,
.grade ::after {
  content: '';
  position: absolute;
  top: 0;
  left: 29px;
  width: 15px;
  height: 44px;
  box-sizing: border-box;
}

My 2nd question is:

These don’t have top positions on them.

.grade ::before {
  left: 0;
  background: rgba(0, 255, 255, 0.5);
  border-right: 3px solid #0059dd;
  
}

.grade ::after {
  right: 0;
  background: rgba(255, 0, 255, 0.5);
  border-left: 3px solid #0059dd;
}

Does the top:0; here carry over to the below rule-sets?

Which would mean, I wouldn’t need to specify them again.

.grade ::before,
.grade ::after {
  content: '';
  position: absolute;
  top: 0;

.grade ::before {
  left: 0;
  background: rgba(0, 255, 255, 0.5);
  border-right: 3px solid #0059dd;
  
}

.grade ::after {
  right: 0;
  background: rgba(255, 0, 255, 0.5);
  border-left: 3px solid #0059dd;
}
47

Wait a second, I can do this.

.grade ::before,
.grade ::after {
  content: '';
  position: absolute;
  top: 0; 
  right: 0;
  width: 15px;
  height: 44px;
  box-sizing: border-box;

}

.grade ::before {
  left: 0;
  background: rgba(0, 255, 255, 0.5);
  border-right: 3px solid #0059dd;
  
}

.grade ::after {
  background: rgba(255, 0, 255, 0.5);
  border-left: 3px solid #0059dd;
}
48

As I understand it, this first rule-set here doesn’t need to have both top, and left positions.

.grade ::before,
.grade ::after {
  content: '';
  position: absolute;
  top: 0; 
  width: 15px;
  height: 44px;
  box-sizing: border-box;

}

As long as these both have positions added to them, then that’s fine.

Am I right?

.grade ::before {
  left: 0;
  background: rgba(0, 255, 255, 0.5);
  border-right: 3px solid #0059dd;
  
}

.grade ::after {
  right: 0;
  background: rgba(255, 0, 255, 0.5);
  border-left: 3px solid #0059dd;
}
1 Like
49

Yes, that’s fine. They are both getting top:0; from the grouped selector.

Then they get the left or right property individually as they need it.

In that situation there are NO overrides, they got what they need by grouped and individual rules.

1 Like
50

To be technical about this.

I’ve seen this written 4 different ways,

Which way technically is how it’s supposed to be written?

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
51

There is no right or wrong order to write rules within a selector, it is your personal preference.

If I need all four I usually list them counterclockwise

top: 0; left: 0; bottom: 0; right: 0;

I got into that habit because if I only needed top & left that’s how I would write them

top: 0; left: 0;
So that is usually how my flow was going anyway and then I would add bottom and right if it was neded

4 Likes
52

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.