html - border / frame overlay blocks content -
i want have fixed frame , content flowing behind it. did border property. problem content underneath layer border can't accessed. visible of course can't select text (no problem) or click links (big problem).
my question how can make content accessible still keep frame stay on top.
i'm not pro, it's personal portfolio page , hoping keep simple , clean html5/css3. if not possible pure css might tolerate bit of javascrip. maybe "clip-path", "mask" or maybe frame not made "border" instead svg rectangle without fill? smart rearrangement of html and/or z-indexes? tried hole day couldn't work.
i made graphic representation illustrate problem:
here code:
* { box-sizing: border-box; } html, body { margin: 0; } body{ font-family: sans-serif; font-weight: bolder; } .max, .content{ overflow: hidden; } .max{ position: fixed; border: 1em solid black; top: 2em; right: 2em; bottom: 2em; left: 2em; } .one, .two{ position: absolute; font-size: 2em; color: white; background-color: black; padding: 0.1em; } .one{ top: -0.25em; left: 0; } .two{ bottom: -0.25em; right: 0; } .content{ display: flex; width: 100%; height: 100vh; } .link{ margin: auto; color: white; } .content:nth-child(1){ background-color: red; } .content:nth-child(2){ background-color: green; } .content:nth-child(3){ background-color: blue; }<div class="max"> <span class="one">i ...</span> <span class="two">fixed frame</span> </div> <div id="wrapper"> <div class="content"> <a class="link" href="#"> <h1>link</h1> </a> </div> <div class="content"> <a class="link" href="#"> <h1>link</h1> </a> </div> <div class="content"> <a class="link" href="#"> <h1>link</h1> </a> </div> </div>i hope can find smart solution it.
you can use pointer-events: none; isn't ie friendly. allow "click through" frame. http://caniuse.com/#feat=pointer-events
Comments
Post a Comment