Absolute VS Relative Position Width & Height

absolute vs relative position width & height

Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.
This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.
The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.

CSS position relative : width not considered

When the CSS position (in .second::before) is set to relative, the width (fixed in pixels) is not considered, only the vertical line is displayed and width is "forced by the browser" to 1 pixel.

A pseudo element is an inline element by default, setting position:relative will not change this thus you cannot apply width and height to the element. Then the borwser is not forcing the width to 1px, it's the border you have set that is equal to 1px. The height also isn't working and the height of the element and the border is defined by the font property.

Increase the height and you will see that nothing will change:

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

Why when you are using position:relative at div height in percent does not work?

See the specification:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

So when you set position: relative and, as is this case, the height of the parent isn't specified, then it gets treated as height: auto.

An absolutely positioned element, assuming there is no other containing block in the way, will have the viewport as its containing block, and that has a known height.

How to use CSS position(relative, absolute) with percentage (height, width) dimension?

A few examples to get you some insight in position and more, hope it helps to bring your css-skills to a next level.

Important read html code first and look what happen in result

First of all, understand block-level/inline elements.

* {  outline: 1px solid}div.iHaveKids {  padding: 25px}/* all childs of div*/
div > * {  background-color: red}b {  background-color: yellow;  width: 100%;}b.running {  margin-left: 40px}span {  background-color: pink}div.clearMe {  width: 50px;}

<div>This is a beatifull block-level element</div><span>This is inline element</span><div>a block-level element width is, if not set, 100%</div><div class="iHaveKids">a block-level element height is, if not set, designed to fit hes childeren  <div>I'm a child</div>  <div>Me tooooooo</div>  <div><b>A block element can have margins and/or paddings but i'm a inline element</b>  </div>  <div><b>Even when i have a width set i just ignore them, because i'm a inline element</b>  </div>  <div><b class="running away">however i can set margin-left and/or margin-right</b>  </div></div><span>i'm an inline element<span>me toooo and i'm inside an inline element</span><div class="clearMe">block-level element</div><div>block-level elements start at a new-line in the document even if there is enough room</div></span>

What's the standard of width % for child positioned: absolute

This snippet shows the result of setting the second div to have position relative and then position absolute. You can see that the absolutely positioned element takes on the width of its parent including the padding.

Sample Image

.first {
  background-color: yellow;
  width: 100px;
  height: 100px;
  padding: 10%;
  position: relative;
}

.second {
  background-color: blue;
  width: 100%;
  height: 100%;
  opacity: 40%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

<h2>The blue square has relative position</h2>
<div class="first">HI
  <div class="second relative">
    HELLO
  </div>
</div>
<h2>The blue square has absolute position</h2>
<div class="first">HI
  <div class="second absolute">
    HELLO
  </div>
</div>

Why does position: relative make the height to zero?

It is not the position: relative that is causing the problem but the position: absolute set on the h1.

If the parent container having the absolutely positioned child element doesn't have an explicit width and height set, it will collapse. This is because absolutely positioned elements are taken out of the normal flow of the document.

In order to solve your problem, you can explicitly set height/width on your .main.

Why doesn't width/height work with non positioned pseudo elements?

First, it's not about percentage values. You will have the same result even with pixel values and both width and height aren't working.

Pseudo elements are inline elements and their width/height is only defined by their content and the width/height set with CSS will be ignored.

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. ^ref

width
This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them ^ref

The 'height' property does not apply. The height of the content area should be based on the font ... ^ref

By making the pseudo element position:absolute you will now consider the rules that applies to Absolutely positioned element in order to calculate width and height. You will also notice that the element will have a computed value of block within display.

Sample Image

You should also pay attention to the use of positioned element which means either relative, absolute, fixed or sticky BUT making the element position:relative will keep it an inline level element and you still cannot use width/height.

.positioned {
    position: relative;
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.positioned::before {
    position: relative;
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

.not-positioned {
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.not-positioned::before {
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

<div class="positioned"></div>
<div class="not-positioned"></div>

Absolute VS Relative Position Width & Height