Absolute Positioning elements

HTML & CSS
1

Should I include


  top: 0;
  left: 0;

On all my relatives?

Currently I have none of those on any of my relatives.

Is it needed or required to be put on those, or no?


.wrapa {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  background: url("https://i.imgur.com/xmdldMK.png") no-repeat 0 0;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapc {
  position: relative;
  width: 266px;
  height: 50px;
  overflow: hidden;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapd {
  position: relative;
  width: 266px;
  height: 200px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.wrapf {
  position: relative;
  width: 266px;
  height: 251px;
  cursor: pointer;
  background: url("https://i.imgur.com/qaEvk4G.png") no-repeat;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
2

No, you do not need to.
position:relative; in all your code is only there to establish the containing block for the absolute positioned elements.

1 Like
3

And when it comes to using absolute, you need to include at-least:

Both

top: 0;
left: 0;

elements?

You can’t just use one of them, would this be right?

That’s what this says to do:

You must use at-least

top
left

Using this as an example:

You can’t just use left, you must use both:

.left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}
4

399×588 117 KB

5

About 5.)

Do you agree with that?


.left-background {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}

.left-border {
  position: absolute;
  top: 0;
  left: 12px;
  margin: 0;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.middle-background {
  position: absolute;
  top: 0;
  left: 15px;
  margin: 0;
  width: 14px;
  height: 100%;
  background: rgb(50, 139, 77, 0.5);
}

.right-border {
  position: absolute;
  top: 0;
  left: 29px;
  margin: 0;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.right-background {
  position: absolute;
  top: 0;
  left: 32px;
  margin: 0;
  width: 12px;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}
6

Don’t interpret an example as a mandatory statement for all conditions.

It could’ve just as easily been…


bottom:0;
right:0

But to reaffirm what has already been said before in your other thread…

Therefore unless you specifically want auto positioning behavior it is better to always supply at least two co-ordinates for your absolute elements just to be sure.

2 Likes
7

#5

Do you agree that you should specify margin: 0; on all absolute elements?

8

That ties right in with what I just said
Don’t interpret an example as a mandatory statement for all conditions.

If you applied absolute positioning to an element that had a default margin on it then maybe yes, you might need to remove the margin if it causes you a problem.

Do I personally set margin:0; on everything I position? the answer is No

3 Likes
9

Only use it when you need it.

The only times I needed to use it was on the pause/play buttons.

.playa,
.pausea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
10

Yes, that is different
using margin:auto; along with left:0; and right:0; is an auto centering method

2 Likes
11

If you applied absolute positioning to an element that had a default margin on it then maybe yes

What would an example of that be?

12 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
div {
   position:relative;
   width:600px;
   margin:auto;
   min-height:200px;
   outline:1px solid red;
}
blockquote {
   position:absolute;
   bottom:0;
   left:0;
   background:yellow;
   /*margin:0; /* you wil see browsers default margin with this commented out*/
}
</style>
</head>
<body>

<div>
   <blockquote>This blockquote has default margins on it that the browser sets if not removed or changed</blockquote>
</div>

</body>
</html>
1 Like
13

Yes, I see that, thanks.

1 Like
14

When would you use:

bottom:0;
right:0;

as opposed to

top: 0;
left: 0;

How do you know when to use one over the other?

15

It’s like the difference between a toothbrush and a hairbrush. It all depends on what your trying to accomplish, and that will determine the correct brush to use. :ok_hand:

1 Like
16

Top overrides bottom, so then, bottom is not needed here.

.left-background {
  position: absolute;
  top:0;
  bottom: 45656px;
  left: 0;
17

I have a question about something.

On the right border, would you use

right 12px;

or

left: 29px;

And is there a technical answer to this?


.right-border {
  position: absolute;
  top:0;
  left: 29px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}


.right-border {
  position: absolute;
  top:0;
  right: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}
18

No tech answer, but if I wanted it 12px from the right I’d use right:12px

But, if you had your styles grouped together like we always try then a simple override of left:29px could keep your code leaner.

CSS is adaptable, you need to adapt with it and stop thinking there is only one right way to do things.

3 Likes
19

What are you saying there?

Because I’m using left on all of my styles, then don’t change that?

a simple override of left:29px

Means what?

20

No it doesn’t they all apply unless as in your example you tell it nonsense. The bottom cannot be above the top in any reality and is classed as over-constrained and ignored.

3 Likes