I had a look at the note in the CSS. Is the question why header::after is displayed on top of header, even though header::after has a smaller z-index than header?
It's because the header's combination of position: relative and z-index: 1 creates a new stacking context.
If you remove all z-indexes, the elements will be stacked in order of occurrence:
.wrapper(white)header(red)- text content
header::after(blue)
Add header::after { z-index: -1; }, which sends it to the bottom of the stack:
header::after(blue).wrapper(white)header(red)- text content
Add header { position: relative; z-index: 1; }, which creates a new stacking context. header::after will be sent to the bottom of that stacking context:
.wrapper(white)header(red)-
header::after(blue)
-
- text content
I think the reason the images gets positioned differently is because of the mix of units for spaces and sizes. I believe the fix could be as simple as converting the values of declarations like top: 32px to top: 2rem, so that they use the new value of the font size.
You dont need to include "Link to" for the accessible name of links, since they are link elements. NVDA + Chrome reads the social links as "Link, Link to Twitter". For this project, using the alt attribute would be enough, just as you've done for the logo link. This would be read as "Link, Facebook".
Marked as helpful
@Thewatcher13
Posted
@markuslewin
Oh okay! I understand the stacking order now, gonna change that. Do you have any other suggestions for this project? I ask this bcs I did this challenge to test my html and css understanding is good enough before I jump to sass and javascript. I want first to master these two, so what are you thoughts? 😁
@Thewatcher13 It looks good to me! I consider the hero part of the main content of the page, rather than part of the header. I don't think you need role="listitem" on the <li>s. I also think the image of the founder is important enough to have an alternative text, since the card is a message from him. The social links could be grouped in a list to make them easier to navigate/skip, but they work fine as is.
Marked as helpful
@Thewatcher13
Posted
@markuslewin thanks to take a look! 🙂
-
the alt on the founder image should be there indeed.
-
the list on the socials is a good idea actually
-
making the hero section part of main, I first did that but I had a one px line between the main and header when I set a background for header and for hero section separatelly. That line was the color of the Background-color from wrapper.
so I did this first
Div with class of wrapper
<header><a href="/index.html"><img src="./assets/images/logo-light.svg" alt="Workit"></a> <a href="" class=primary__button>Apply for access</a>
</header> <main> <section class="hero__section"> <h1 class="title">Data <span class="tailored">tailored</span> to your needs.</h1> <a href="#" class="secondary__button">Learn more</a> <img class="hero__picture" src="./assets/images/image-hero.webp" alt=""> </section>And the other section ofc too
</main>header { Background-color:blue; }
.hero__section{ Background-color blue;}
.wrapper { Background-color:white;}
@Thewatcher13
Posted
@markuslewin I tried your solution for the stacking context, but it's not working...
Also, Whem i'm setting the rem for the images, it is actually much worser, that's why i've used percentages, but it is still not good.
I encountered that 1px glitch as well. I never got around to solving it. It might be possible with some top or translateY, or by layering the sections differently... 🤔
The comment about stacking contexts was meant as an explanation of what's currently happening! I don't think I understand what the problem is. 😅
rems should do it. You might have to convert the dimensions of the images to rem too for them to be sized properly.
Marked as helpful
