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:

enter image description here

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

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

-
i lost "unknown" error: karma.conf.js: frameworks: ['mocha', 'should'], plugins: ['karma-mocha', 'karma-should', 'karma-phantomjs-launcher'], ... browsers: ['phantomjs'], error: 23 07 2015 14:35:37.691:warn [karma]: no captured browser, open http://localhost:9876/ 23 07 2015 14:35:37.701:info [karma]: karma v0.13.3 server started @ http://localhost:9876/ 23 07 2015 14:35:37.707:info [launcher]: starting browser phantomjs 23 07 2015 14:35:37.738:error [karma]: { [error: spawn unknown] code: 'unknown', errno: 'unknown', syscall: 'spawn' } error: spawn unknown @ exports._errnoexception (util.js:749:11) @ childprocess.spawn (child_process.js:1093:11) @ exports.spawn (child_process.js:933:9) @ object._execcommand (c:\users\jinga4x\git\mdl-sample-project\node_modules\karma\lib\launchers\process.js:63:21) @ object._start (c:\users\jinga4x\git\md
Read more

Nuget pack csproj using nuspec -

-
i want create nuget package contains specified in nuspec file, still version csproj. in order use token have pack like: nuget pack myproj.csproj but when adds dependencies , creates unwanted folder in nuget package. nuspec file is: <?xml version="1.0" encoding="utf-8"?> <package xmlns="http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd"> <metadata> <id>test</id> <version>$version$</version> <title>test</title> <authors>test</authors> <owners>test</owners> <requirelicenseacceptance>false</requirelicenseacceptance> <description>test</description> <summary>test</summary> <releasenotes>test</releasenotes> <copyright>test</copyright> </metadata> <files> <file src="bin\debug\*.dll" target="lib\net45" /> <file s
Read more

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -

-
i have aspxgridview includes new , delete button. delete button includs gv_rowdeleting event. want show aspxpopupcontrol (id="pupconfirm"). want user have confirm password delete item. tried: protected void gv_rowdeleting(object sender, devexpress.web.data.aspxdatadeletingeventargs e) { pupconfirm.showonpageload = true; } but nothing happened. please me. !!! you can create template column javascript prompt confirmation. <itemtemplate> <asp:linkbutton id="btndelete" runat="server" text="delete" commandname="delete" onclientclick="javascript:if(!confirm('are sure want delete record?')){return false;}"> </asp:linkbutton> </itemtemplate>
Read more