SOLVED: Placing all my divs UNDER a fixed border whenever the page is being scrolled

EDIT: This has been solved now, thank you!

Hello everyone, so I’m working on my portfolio website and would love everyone’s help on a design feature I’m struggling with.

My website will have a fixed border which is part of my personal branding. The thing is when you scroll on the page, the text and images go ABOVE the border and I want everything to go UNDER the border. But my border’s z-index is set at -1 and if I place my content’s z-index at -1, then that means you can’t highlight the text or click on the images. :confused: Can anyone figure out how I can go around this?


Here is my site Read-Only: PORTFOLIO WEBSITE

This is the effect I want to replicate from another person’s personal website: LINK

All, a fairly old post but exactly what I want to do as well efficiently. Anyone, who can share how to do this in the smartest way?
Thanks a lot
Gerd

From the example page they’ve given. I’d have a fixed div with a child element to handle the slight colour overlay and another child of that for the clear area in the middle, the black border would go on this too. Set the z-index of the fixed div to 100 or whatever sits above all other content.

You’ll need an embed with the following css

<style>
.pointer-events-off{
pointer-events: none;
}
.pointer-events-on{
pointer-events: auto;
}
</style>

Then add the class to turn off pointer events to the border element, and add pointer events on to the child of that object, so that links etc will still be selectable on the main content.

Hopefully that makes sense!

Hi David, not sure I understand this properly. How does the CSS pointer style relate to this fixed frame around the screen?

Since the div will cover the whole screen the user would not be able to interact with the page. It would only be possible to press the div. With this class the div becomes unclickable. making the site usable again. Hope that explains it.

As @felix_hellstrom has said, you need to make only the border unclickable. Without pointer events being changed, both the parent fixed element and its children would cover your site and make it unusable. It’s almost like you’re punching a hole in the fixed elements to allow your site to be interactable.

1 Like

Got it! Thanks for the support. Great community!