I have a problem with my site as z-index kind of works but it doesn't and I have not found an answer that fits my needs on the internet.
.Mwrapper
{
z-index: 2;
position: fixed;
bottom: 0%;
margin-top: 120em;
}
.Msliding-background
{
z-index: 2;
background-color: red;
}
.Mhider
{
z-index: 2;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,1));
}
.Mvid
{
z-index: -2;
position: relative;
margin-top: 25em;
text-align: center;
}
.Mvid video
{
position: relative;
z-index: -1;
height: 720px;
width: 1280px;
}
.Mvideo
{
bottom: 724px;
left: 120px;
position: relative;
z-index: 0;
height: 725px;
width: 1280px;
background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1));
}
<div id="Mfog" class="Mwrapper"><div class="Msliding-background"><div class="Mhider"></div> </div></div>
<nav class="Mvid">
<video id="video">
<source src="demo.mp4" type="video/mp4">
</video>
<div class="Mvideo" onclick="audioPause()"></div>
</nav>
It works in the sense that Mvideo appears above Mvid video but Mwrapper does not appear above Mvid.
All help appreciated :)
Currently, .Mwrapper doesn't even appear on your screen.
First of all, you need to define a left: value for a fixed item, and your margin-top is pushing it entirely off screen.
Try:
.Mwrapper
{
z-index: 2;
position: fixed;
bottom: 0%;
left:0;
}
With this code, .Mwrapper won't be visible - but as soon as you put content inside it, you'll se it appear.
Here it is with fixed width, so it appears even when empty of content:
.Mwrapper
{
z-index: 2;
position: fixed;
bottom:0;
left:0;
width:100vw;
height:50px;
background:blue;
}
.Msliding-background
{
z-index: 2;
background-color: red;
width:calc(100vw - 200px);
margin:auto;
height:30px;
}
You'll see that z-index is working exactly like it's supposed to:
https://jsfiddle.net/ZheerH/a444bqLf/2/
Related
I'd like to have an overlay, that is "somewhere potentially deep" in the DOM.
There seems to be a problem or something I am doing wrong with position: sticky though.
If the overlay element is a child of a "position-sticky element", then other "position-sticky elements" are not covered correctly.
I created a Codepen demonstrating the problem.
Is there a reasonable explanation or solution/workaround for this?
Update: As per the OP the yellow area needs to be on top always without the fade.
Add the z-index: 0 to input[type="checkbox"]:checked::after class to fix the issue.
html,
body {
margin: 0;
}
body {
padding-top: 40px;
}
header {
position: fixed;
z-index: 1;
top: 0;
height: 40px;
background: green;
width: 100%;
}
section {
height: 100px;
background: red;
}
section:last-of-type {
background: purple;
position: sticky;
top: 40px;
}
div {
display: flex;
}
article {
width: 50%;
}
article:first-child {
height: 200vh;
background: cyan;
}
article:last-child {
background: yellow;
position: sticky;
top: 140px;
height: calc(100vh - 140px);
}
input[type="checkbox"]:checked::after {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}
input {
display: block;
}
<header></header>
<section>Click me<input type="checkbox" /> I am NOT sticky</section>
<section>Click me<input type="checkbox" />I am sticky</section>
<div>
<article>OK</article>
<article>
<h2>Not covered by overlay when clicking purple (which is sticky)</h2>
<h2>Covered be overlay when clicking red
</article>
</div>
I have made a footer in Photoshop looking like this:
As you can see, the footer here is slightly arced all the way across. I have tried doing something with border-radius, but that almost only targets the edge, which makes the arc more curved in the edges, and not even receiving the effect of a subtle arced footer as seen in the image.
Is there an easy CSS way to do this, or do I need some JavaScript or something to achieve this?
Use a pseudo element of the footer with border-radius to make the arch.
I made them different colors here so you can see which element is which.
body {
margin: 0;
max-height: 100vh;
overflow: hidden;
}
footer {
bottom: 0; left: 0; right: 0;
position: absolute;
background: brown;
height: 10vh;
}
footer::before {
content: '';
background: red;
width: 200%;
position: absolute;
left: 50%;
top: -100%;
transform: translateX(-50%);
height: 1000%;
border-radius: 50%;
z-index: -1;
}
<footer></footer>
This solution uses a large width to get a more pleasant curve, but without the pseudo-element:
footer {
background-color: red;
width: 200%;
transform: translateX(-25%);
height: 200px;
border-radius: 50% 50% 0 0;
}
<div>
<footer></footer>
</div>
Its not perfect, but here i've got a really really big circle that's absolutely positioned with the overflow hidden so that you only see the top part of the arc.
#container{
background: grey;
height:300px;
width:500px;
position:relative;
overflow:hidden;
}
#arc{
position: absolute;
top:200px;
left:-800px;
width:2000px;
height:2000px;
border-radius:2000px;
background:brown;
}
<div id="container">
<div id="arc">
</div>
</div>
https://jsfiddle.net/z9pq1026/
You can actually use border-radius to do this without a pseudo element.
.arc {
width: 100%;
height:500px;
background: #000000;
border-radius: 50% / 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div class="arc"></div>
will work just fine. Make sure that when you use:
border-radius: 50% / 30px;
the first property is always "50%" as this will ensure the arc meets in the middle. The second property (after the "/") is the height of the arc measured from the middle to the edges
The circle solution, but it's responsive!
footer {
background: #ececec;
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.arc {
position: absolute;
top: 0px;
right: calc(-80%);
width: 300%;
padding-top: 100%;
border-radius: 100%;
background: black;
}
<footer>
<div class="arc">
</div>
</footer>
Let me share an example for better illustrating:
jsFiddle: http://jsfiddle.net/yhurak3e/
Or you can read it here:
HTML:
<div id="box1">box1</div>
<div id="box2">box2
<div>
<div id="box4">box4</div>
</div>
</div>
<div id="box3">box3</div>
CSS:
#box1 {
width: 100%;
height: 40px;
position: fixed;
top: 0;
left: 0;
background: green;
z-index: 5;
}
#box2 {
height: 300px;
position: relative;
background: yellow;
}
#box3 {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: fixed;
background: black;
opacity: .8;
z-index: 10;
}
#box4 {
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
position: fixed;
background: blue;
z-index: 11;
}
In every other browser, the #box4 (the blue one) appears on the top of the other elements unless I give a z-index property to one of it's anchestors. This is the expected result.
In Android's default browser (tested on 4.1) the #box4 lies under the #box1 and #box3.
Does anybody know a CSS workaround to fix it?
Thx!
A workaround for a similar problem from this thread is to apply
-webkit-transform:translateZ(0);
to #box4.
You have to apply the above mentioned workaround on the parent element or elements of the #box4, along with applying the -webkit-transform:translateZ(0); to the #box4 like this:
#box1, #box2{ /*parent*/
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
#box4{ /*child*/
-webkit-transform:translateZ(0); /* Chrome, Safari, Opera */
transform:translateZ(0);
}
Working demo: http://jsfiddle.net/iorgu/yhurak3e/14/
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}