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. Can anyone figure out how I can go around this?
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.
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.
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.