I want to block users to click anywhere on the page except just on top div with a button.
.topdiv {
height: 90px;
}
.divBlocking {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
So whole screen is not clickable including the tobdiv than I don't want to. Changing divBlocking=>top: 90; seems not work
Update topdiv class with position: fixed; and z-index: 999;
.topdiv {
height: 90px;
position: fixed;
z-index: 999;
}
.divBlocking {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
You can simply add z-index: -1 to .divBlocking.
This means send .divBlocking to the back.
To show case the difference, I add some background color.
Your original code result like this
Add z-index: -1 to .divBlocking
Edited code
.topdiv{
height:90px;
background-color: red;
}
.divBlocking{
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
background-color:rgba(201, 76, 76, 0.3);
z-index: -1;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
My understanding of CSS is that you can determine the stack order of elements by using the z-index
In the most basic cases, HTML pages can be considered two-dimensional,
because text, images, and other elements are arranged on the page
without overlapping. In this case, there is a single rendering flow,
and all elements are aware of the space taken by others. The z-index
attribute lets you adjust the order of the layering of objects when
rendering content.
Understanding the z-index
Related
I have a sticky header that needs some z-index to be infront of the page content.
The sticky-header scss is:
.sticky-header {
position: sticky;
top: 0;
padding-top: $spacing;
background-color: $background-color;
z-index: 100;
}
In the content of the page, I have a "modal view" that contains an overlay (modal-container) element that I want to display above the entire page. The modal css looks like:
.modal-container {
z-index: 3000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
}
.modal-inner {
z-index: 100;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For some reason, the sticky header is being displayed above the modal overlay, even though it explicitly has a greater z-index value.
The gist of the html structure is:
<div class="sticky-header">...</div>
<div class="page-content">
<div class="modal-container">
<div class="modal-inner">
...content...
</div>
</div>
</div>
Also the sticky-header wraps an angular ng-content if that has anything to do with this issue.
Any help is appreciated!
Usually this is caused by a misunderstanding of the stacking index.
The easiest way to debug it is to manually stick a huge z-index on each parent element of the <div class="modal-container"> until you find out which is the problematic element.
At a guess, you've set position:relative on your <div class="page-content">, and you've given it a z-index of less than 100.
I have 3d canvas with z-index : -1
I want to display components on z-index: 0 and be able to click 3d canvas without any problems. Unfortunately when I add component A to z-index: 0 margin of this component is spread horizontally and I'm unable to click 3d canvas one the left and right side of component A.
.background-3d-canvas {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-color: silver;
}
.front-component {
background-color: blue;border-radius: 10px;
padding: 20px;
margin: auto;
width: 300px;
background-color: blue;
}
<div class="background-3d-canvas">
Test<br/>
Test2<br/>
Test3<br/>
Test4<br/>
Test5<br/>
Test6<br/>
</div>
<div class="front-component">
Editor
</div>
I created jsfiddle to demonstrate this problem. Not all links are clickable.
https://jsfiddle.net/ec5uuthy/
You can add those attributes to .front-component:
pointer-events: none;
position: absolute;
left: 0;
right: 0;
https://jsfiddle.net/76bpqge1/
I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html?
EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.
HTML:
<div class="mask"></div>
<div class="below-mask">
<div class="above-mask"></div>
</div>
CSS:
.mask{
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
.below-mask{
position: absolute;
width: 15em;
height: 15em;
background: blue;
z-index: 1;
}
.above-mask{
position: absolute;
width: 10em; height: 10em;
top: 2.5em; left: 2.5em;
background: yellow;
z-index: 100;
}
codepen: http://codepen.io/anon/pen/WrXbaL
EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.
Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:
outline: 1000em solid rgba(0,0,0,0.3);
It does the trick.
http://codepen.io/anon/pen/eJeNVg
Given the following HTML:
#header {
position: fixed;
z-index: 1;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
z-index: 2;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
How do I amend the CSS only, so #drop is considered in front of both #header and #footer. While maintaining that #footer is in front of #header?
According to the current standard, this is as easy as removing the z-index from #header. With the default z-index of auto, the header does not establish a new stacking context, and thus the dropdown and the footer belong to the same stacking context, and #drop's z-index of 3 pushes it above the footer. You can even remove the z-index from the footer as well; because it comes after the header in document order, it will still be on top.
Try it out:
#header {
position: fixed;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
Works great. In Firefox.
But since you're probably using Chrome, not so much. Chrome has decided to ignore the standard for mobile performance reasons; in Chrome, a position: fixed element always establishes a new stacking context, regardless of its z-index value. As BoltClock points out, this change may sooner or later appear in other browsers as well.
And thus in Chrome, since the dropdown is a descendant of the header, its stacking context is the one established by the header, and that stacking context is below the footer, per your requirement. So in a cross-browser future-proof way and within your constraints, this is utterly impossible.
If you want to do this without your JavaScript workaround, I see two options:
Move the dropdown out of the header
That works easily enough in your example
#header {
position: fixed;
z-index: 1;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: fixed;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
z-index: 2;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
</div>
<div id="drop">
</div>
<div id="footer">
</div>
but is more elaborate in your actual case on Discourse, where the dropdown then can no longer be top: 100%; for nice positioning. You'd actually have to measure the correct y-coordinate when creating the dropdown, so this isn't a JS-free solution either.
Keep the dropdown in the header, but make the header not create a new stacking context
However, as explained above, this means that the header cannot be position: fixed anymore. And since your header must of course be fixed in the viewport (and we don't want to ensure this via JS), the header then has to have an ancestor that's position: fixed instead.
Just wrapping the header in another fixed-position div doesn't do you any good, since it creates the exact same problem; the footer is still in a different stacking context. So this wrapper div needs to include both the header and the footer. If that's not doable in Discourse's architecture, you can stop reading here.
By making your wrapper position: fixed, but making your header position: absolute and z-index: auto, you prevent a new stacking context from being created by the header.
The wrapper needs a width of 100%, so the header's and footer's width: 100% work. The wrapper will have a height of 0, which is both necessary (because it sits above your main content and thus must not obscure it) and not problematic (since the footer is still position: fixed at the bottom, and the wrapper itself has visible overflow).
In your example, it looks like this:
#fixed-wrapper {
position: fixed;
width: 100%;
}
#header {
position: absolute;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="fixed-wrapper">
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
<div id="fixed-wrapper">
As for actually testing it on Discourse, I used http://discourse.opentechschool.org/ because it hasn't been updated yet to include your JavaScript workaround (and I happen to have an account there).
I clicked "reply" on a post, resized the composer so that it overlaps with the header, and clicked the (now only partially visible) "search" icon. As expected I couldn't see the search popup.
Then I put this into the JavaScript console:
$("<div id='fixed-wrapper' />").prependTo("#main")
.css({position:"fixed", width:"100%", zIndex: 1000}) // z-index 1000 is what the
// header used to have
.append( // move the header and footer
$("header.d-header, #reply-control") // to the wrapper and remove
.css({zIndex:"auto"}) // their z-indexes
);
$("header.d-header").css("position", "absolute") // stop the header from
// creating a stacking
// context
Now the search box is above the composer, which itself is still above the header, as desired.
If you can live with header being static, then I think this is what you are looking for.
#header {
position: static;
z-index: 1;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
z-index: 2;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
This is killing me for hours. Just a simple Anchor tag is not working.
<div id="navigator">
<div class="show">
<span>PORTFOLIO</span><span class="carat"></span>
</div>
</div>
Wherever I am trying to put an anchor tag, its not working
CSS is :
#navigator {
position: fixed;
top: 199px;
left: 0;
}
The page is here.. http://myingage.com/?page_id=25
Add z-index in #navigator in style.css,
#navigator {
display: none;
font-family: 'Titillium Web',sans-serif;
left: 0;
position: fixed;
top: 199px;
z-index: 100;
}
your navigator is behind the page
just add z-index: 1000 (anything bigger than z-index of your content) or move your navigator code behind the code of content
try giving a higher z-index
This works for me.
#navigator {
position: fixed;
top: 199px;
left: 0;
z-index: 10001;
}