Relative Positioning Issues

1

https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

<< We will also give its parent element a relative position so that it does not get positioned relative to the element. >>

.parent-element {

position: relative;

height: 100px;

padding: 10px;

background-color: #81adc8;

}

I’m not quite certain that I understand what is going on here. I am guessing that the parent element is being positioned relative to the html element - correct? And the sole reason for using this line - position: relative - is so that the

position: absolute property of .main-element is connected to the parent element - correct?

2

Positive relative work with at least one property such as: left, right, top and bottom.
.parent-element {
position: relative;
height: 100px;
padding: 10px;
background-color: #81adc8;
left: 50px;
top:50px;
}
position: absolute property of .main-element is connected to the parent element - correct?
Yes, it is correct.

3

Thanks for setting me straight on that.

4

I put relative on everything by default.
This allows you to set the z-index on any element it also allows position absolute to work (I use before and after psuedo elements with position absolute a lot).