Can someone please explain why I have to add position: relative?

1 
<!-- Parallax --!>
<section id="parallax-section" class="parallax">
                        <div class="parallax-bg">
                        </div>
                    </section>
<!-- About Me --!>
                    <section id="aboutme-section" class="aboutme">
                        <div class="row-container-flex">
                            <div class="about-me-column">
                                <div class="about-me-inner">
                                    <div class="about-me-text">
                                    <h2>About Me:</h2>
                                    <p>A self-taught developer from FCC,
                                        CodeCademy, and The Odin Project
                                    </p>
                                    <p class="perks">- with added perks.</p>
                                    </div>
                                    <div>
                                        <a href="#" class="btn abtme-btn">Have a project for me?</a>
                                    </div>
                                </div>
</section>

CSS Code:
/*PARALLAX SECTION */

.parallax-bg{
    min-height: 400px;
    background: url("https://abecaymo.com/wp-content/uploads/2019/02/Philippine-Flag.jpg") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    opacity: .4;
}

/*ABOUT ME SECTION */

.aboutme{
    position: relative; <<<<<<<---- this guy
    width: 80%;
    height: 100%;
    border-radius: 30px;
    margin: -80px auto 0; 
    background-color: #fff;
    padding-top: 20px;
}

I created a parallax background image and added opacity to it.

My problem: I tried to overlap the next section by adding (margin-top : -80px) but it also becomes transparent along with the parallax background.
THEN, I added position: relative and the background got fixed (no opacity, white background).

My question: But, WHY? What does position:relative have anything to do with it? I’m trying to understand the logic behind it.

2

I’m not sure if this is what you’re looking for, however I’ll try to explain the best I can:

The main difference between position relative and absolute is the document flow.

When you use position relative - the item still occupies the same “space” on the document flow. So, if you move it around, it will move, but still that space will be occupied.

When you use position absolute, the item is removed of the document flow. I like to think that once you apply absolute, it’s as if the item would start flying over the others.

HOWEVER they have a relation. Whenever you apply absolute to an item, it will be positioned related to the immediate parent that has a position “relative”. If no item above the parenthood of the item is relative, it will be position related to the body/html.

If it’s still hard to understand, what this video. This guy’s a genius in explaining how CSS positions work!

3

I believe it is creating a new stacking context.

So would using opacity: 0.9;, or transform: scale(1); or any other properties which create a new stacking context added to .aboutme.

1 Like
4

Thank you both for the replies.

5

Not the answer I was looking for, but thank you for introducing a great channel.
Love his crystal explanations.

1 Like