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
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 developing a webpage which puts an iframe as a background due to other div elements "playing with it". Using z-index, it is in the background area, visible, but i need to be able to control it, and the controls that are usually present are missing. Here's the main code:
Here's the html:
<div class="bg-about">
<iframe src="https://player.vimeo.com/video/54960454?title=0&byline=0&portrait=0;autoplay=1"></iframe>
<div id="iframe"></div>
</div>
Here's the css:
iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iframe {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
Any ideas? I really need the controls.
Note: the background is not actually behind anything, but due to formatting, it must be in a background. And I'm not sure why its displayed wrong.
You are covering the video with the #iframe, so you can't rollover video to view controls. I just swapped the z index of video to 2 and #iframe to 1. You were just covering video with div by mistake.
iframe {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
here is link: https://jsfiddle.net/keinchy/asga90Lg/
I want to zoom the picture on hover.
So, it works so far but the end result isn't what I want.
When the picture zooms, it stops on the left side of the containing div and enlarges to the right side.
I already found the direction property but with that I can only switch the side behaviors. Something like direction: all would propably work, but it doesn't exist.
What I expect:
What I get:
See the JSFiddle
I recommend pure CSS without any JavaScript and jQuery code.
Here is one way of doing it:
#container {
margin: 0 auto;
width: 800px;
height: 400px;
/*overflow: hidden;*/
position: relative;
border: 1px solid red;
}
#container img {
position: absolute;
margin: auto;
top: 0px;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
/*transition: all 0.5s ease;*/
}
#container img:hover {
left: -5%;
width: 110%;
height: 110%;
}
Add left: -5% to you CSS rule for img:hover.
See demo at: http://jsfiddle.net/audetwebdesign/Em7yu/
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;
}