I'm trying to create overlay for modal window.
Here is my css
#overlay {
position: absolute;
background: #000;
width: 100%;
height: 100%;
z-index: 9800;
}
The problem is that layer does not cover entire page. When I scroll down overlay disappear.
What I miss ?
Use fixed positioning:
position: fixed;
You should have:
#overlay {
position: fixed;
background: #000;
width: 100%;
height: 100%;
z-index: 9800;
}
Since IE6 doesn't have support for position: fixed there is a solution I used in Modalbox:
#overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
border: 0;
background-color: #000!important;
}
#overlay[id] { position: fixed; }
In this case the IE will take a position: absolute style but every modern browser the second rule with position: fixed.
For IE you should use some additional CSS to prevent it from being scrollable. I managed it by setting following rules on body:
{
width: 100%;
height: 100%;
overflow: hidden;
}
Better if you do it in an addition class which will be toggled on body element when you show your overlay (in JS).
Add top:0, left:0 and position:fixed to the #overlay. U may add opacity css too .
#overlay {
position: fixed;
background-color: #000;
width: 100%;
height: 100%;
z-index: 9800;
top:0;
left:0;
opacity:0.5;
}
Related
I'm building a React app, and I'm having a problem with position: sticky in my story-header element. I already checked the parent styles and there's no overflow: hidden attribute-value.
HTML
<div className='StoryList' >
<div className='story-header'></div>
</div>
CSS - Stylesheet
.App {
width: 100%;
overflow: visible;
}
.StoryList {
position: relative;
margin: 0;
width: 100%;
}
.story-header {
width: 100%;
top: -20px;
height: 50px;
left: 0;
background-color: lightgray;
position: sticky;
z-index: 1;
}
Why is the story-header sliding above the top?
I'm not sure that I understood you correctly, but it works as it should. I've tried it in pure html/css and it's working. Check my code, buddy:
.App {
width: 100%;
height: 200vh;
overflow: visible;
}
.StoryList {
background: #000;
height: 40vh;
position: fixed; // you can comment it out, I'm not sure what would you like to have
margin: 0;
width: 100%;
}
.story-header {
width: 100%;
top: -20px;
height: 50px;
left: 0;
background-color: lightgray;
position: sticky;
z-index: 1;
}
Check both versions - with fixed position and without it.
well i am also having the same problem turns out i need to set the height of the app and root to inherit, trying doing it and it should work then
It is may be very strange, but in my case the deleting of the font-size: 100%; and the font-size: inherit; in the zero-styles helped me to solve the issue!
This is so strange that I can't even replicate the error in jsfiddle despite copy-pasting the code.
Basically I have it like this:
<div class="container">
<div class="absolute-background" />
<div class="where-is-this" />
</div>
With this CSS:
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
This should display a red box at the top of the screen, as it does in this fiddle: https://jsfiddle.net/Lmj6d625/
However, in my actual page (on the same browser) the blue covers EVERYTHING. I can even add new divs below with text and they are completely hidden.
Screenshot:
Where is my div?!
Anyone have any suggestions how to troubleshoot this?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Thanks to Evert for this answer
1.) DIV Tags can't be self closing
2.) You need a height for the body tag, otherwise it will have 0 height, and that will also apply to container and .absolute-background, making them invisible.
3.) You need position: absolute or position: relative for the z-index of the red DIV to become effective (fixed would also work, but then it wouldn't scroll with the rest of the page)
html,
body {
height: 100%;
margin: 0;
}
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
position: absolute;
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
<div class="container">
<div class="absolute-background"></div>
<div class="where-is-this"></div>
</div>
I am attempting to make the background div actually 100% with other movable/floating divs that are positioned absolutely.
Width 100% is not accounting for the .floater div being far off the screen. (which the browser shows with scrollbars).
live example of problem: https://jsfiddle.net/h0arax9o/2/
Scroll to the right of the preview.
I would like the purple background to cover the entire document.
html:
<div class="background"></div>
<div class="floater"></div>
css:
.background {
background: purple;
width: 100%;
height: 100%;
position: absolute;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
Edit: for clarity, I would like the background to 'stretch' across the entire page, for example, if it was an image, when you scrolled in the example, the image would scroll as well.
I updated the example to showcase that.
.background {
background: purple;
width: 100%;
height: 100%;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
<div class="background"></div>
<div class="floater"></div>
.background {
background: purple;
top: 0; right: 0; bottom: 0; left: 0;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
enter link description here
You need to use a css reset: http://meyerweb.com/eric/tools/css/reset/
If you click on the gear icon on the top right of the css part of jsfiddle you can choose to normalize css. Here's a forked jsfiddle where I did that: https://jsfiddle.net/ckkoq3pn/
_
Tried to make a website menu with three full screen background overlays, but background video (underlying) in that menu is shifted down. What is wrong with positioning markup?
CSS:
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 1px;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: -5;
}
.videoContainer .overlay-vid-1 {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background: black;
opacity: 0.5;
}
P.s. - tried playing with z-index, position: and <div> reordering, but no luck.
P.p.s. - yes, i know, this is not the whole code, but system informer said that I can`t paste whole code, so there is a link to codepen, thank you.
You need to change the position of your video to position: absolute; because it's being pushed down by the .overlay-content. Try changing your CSS to look like this:
CSS
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: absolute; /* Change to absolute */
top: 0px; /* Set top to 0px */
z-index: -5;
}
Updated CodePen
I was wondering if there's a way to block the scroll bar until a div and its loader gets to the point of display none. I don't know if this can be done just with html or css. Any advice?
#loader {
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 9999;
}
#loaderInner {
background:#eeeeee url(https://dl.dropboxusercontent.com/s/asdfghfdsas/loader.gif) center center no-repeat;
background-size: 250px 250px;
position: absolute;
height: 250px;
width: 250px;
display:block;
margin: 0 auto;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
body#layout #loader {
display:none;
overflow: scroll;
}
You can use some simple CSS to prevent scrolling on the page. But you would need to use JS to handle when to apply this class.
CSS
body.loading {
overflow: hidden;
}
Another solution is to put loader div with fixed position, so there's no need to hide the scrollbar (which can cause a strange user experience):
#loader {
position: fixed;
top: 0;
left: 0;
...
}
The div will show while scrolling
In this case you wouldn't need the "body.loading" rule.
The loader scrolling due to the positioning, so we can easily remove the scroll by changing the position css to position:fixed;
it will 100% work.......
#loader {
position: fixed;
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
overflow: hidden;
z-index: 9999;
}
To me this is the best solution to delete the scroll bar while de Loader is display
html, body.loader {
overflow: hidden !important;
}