The page has a yellow centerBox which is vertically middle-aligned and horizontallay center aligned.
Because the box is on z-index:1, it covers the bottom layer.
Although some links are on the bottom layer, it is non-clickable because the yellow box covers the bottom layer.
I like to make the non-clickable links clickable.
The text in the yellow box is dynamic,
If the width of the yellow box is fixed,
I can aligned the box vertically middle and horizontally center with keeping the links on the bottom layers clickable.
Because the yellow box covers some links on the bottom layer
They are hidden by the yellow box and should be non-clickable in case of that.
I did make what I want at http://dot.kr/x-test/center8.php.
But I should use javascript for alignning the yellow box middle and center.
I hope I make it with style.
Theoretically if you set the fixed positioned element to z-index:auto then you should be able to raise the z-index of the yellow box only and do what you want. Unfortunately chrome changed the behaviour of fixed elements last year and fixed positioned elements in Chrome now get a default stacking order of zero instead of auto thus making them atomic.
This means that the parent element and all of its children are treated as one block so your base element that covers the page will either be on top or below other content. It can’t inter weave between elements.
Other browsers (and IE back to version 8) will allow the z-index to work and you can fix your layout for those by simply changing your z-index: 1 to z-index:auto instead.
As chrome is now the largest browser you can’t really just use the above method but what you can do is to use a property in Chrome called pointer-events which will allow clicks to pass through the parent and onto the children underneath. You just then reset pointer events on the yellow box to allow it to accept clicks.