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/
Related
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>
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/
Trying to solve a recent question, I found out what looks like a Chrome and IE bug.
When I set 2 divs, and the containing div has border-radius and overflow: hidden, the inner div is responding to hover on the area that shouldn't be
In this snippet, hover the grey area. The inner div will change color. This happens in IE and Chrome, but not in FF
.innerw, .innerw2 {
width: 240px;
height: 240px;
position: relative;
border-radius: 50%;
}
.innerw {
left: 0px;
top: 0px;
overflow: hidden;
}
.innerw2 {
left: 80px;
top: 0px;
background-color: palegreen;
}
.innerw2:hover {
background-color: green;
}
.inner2 {
left: 168px;
top: 13px;
width: 79px;
height: 229px;
background-color: grey;
z-index: -1;
position: absolute;
}
<div class="innerw">
<div class="innerw2">
</div>
</div>
<div class="inner2"></div>
I would like to know a way to avoid this bug.
I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.
I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!
For instance, take the following HTML & CSS:
<div class="fixed"></div>
<div class="wrapper">
<div class="child"></div>
</div>
.fixed {
background: blue;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.wrapper, .child {
position: absolute;
height: 20px;
width: 20px;
padding: 20px;
}
.wrapper {
z-index: 1;
background: red;
}
.child {
position: absolute;
z-index: 3;
background: yellow;
}
Expected behaviour would be that .child displays above .fixed whilst .wrapper is invisible however on http://jsfiddle.net/STLMR/ .fixed shows above all (tested in Chrome + Firefox). Is there some trick to this, or is there some quirk of CSS I'm missing?
In CSS, z-index is not absolute, but relative to the parent container. With "absolute" I'm not referring to the position: absolute attribute, I state this because it might be confusing.
Related: https://stackoverflow.com/a/7490187/671092
You have to move the .child into a new container that has a higher z-index than .fixed.