I am making popups as position:fixed div and propogate through hierarchy z-index to ensure that this div is on top of everything. Everything fine, except one case when Chrome draw scroll over my popup, iOS safari clips my popop.
I made super small repro https://codepen.io/heavenmaster/pen/XWrQmZY
Note, position absolute and setting z-index is essential for me.
I desperately need a workaround.
.scrollview {
z-index: 1;
position: absolute;
margin: 100px;
width: 200px;
height: 200px;
border: solid gray 1px;
overflow: auto;
}
.container {
z-index: 1;
position: absolute;
width: 1000px;
height: 1000px;
}
.tooltip {
z-index: 1;
width: 250px;
height: 50px;
border: solid 1px gray;
background: silver;
position: fixed;
left: 80px;
top: 80px;
}
<div class='scrollview'>
<div class='container'>
<div class='tooltip'>Tooltip</div>
</div>
</div>
ok let's try this I hope its help:
.scrollview1
{
z-index: 1;
position: absolute;
margin: 100px;
width: 250px;
height: 200px;
}
.scrollview
{
z-index: 1;
/* position: absolute; */
/* margin: 100px; */
width: 200px;
height: 200px;
border: solid gray 1px;
overflow: auto;
}
.container{
z-index: 1;
/* position: absolute; */
width: 1000px;
height: 1000px;
}
.tooltip{
z-index: 1;
width: 250px;
height: 50px;
border: solid 1px gray;
background: silver;
position: fixed;
left: 80px;
top: 80px;
}
<div class='scrollview1'><div class='scrollview'>
<div class='container'>
<div class='tooltip'>Tooltip</div>
</div>
</div></div>
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
In this example is it possible to click the blue box without affecting the red box without using js?
http://codepen.io/YikesItsMikes/pen/MaPBJy
HTML
<div id="boxone">
<div id="boxtwo"></div>
</div>
CSS:
#boxone{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
padding: 10px;
}
#boxtwo{
width: 100px;
height: 200px;
background: blue;
z-index: 999;
}
#boxone:active{
background: yellow;
}
#boxtwo:active{
background: green;
}
Not possible with the current HTML where #boxone wraps #boxtwo.
You could layer the HTML so that #boxtwo is on top of #boxone without nesting it like this;
http://codepen.io/anon/pen/vNVaWV
.wrapper{
width: 200px;
margin: 50px auto;
position: relative;
}
#boxone{
width: 200px;
height: 200px;
background: red;
position: relative;
padding: 10px;
display: inline-block;
}
#boxtwo{
width: 100px;
height: 200px;
background: blue;
z-index: 999;
position: absolute;
top: 10px;
left: 10px;
}
#boxone:active{
background: yellow;
}
#boxtwo:active{
background: green;
}
<div class="wrapper">
<div id="boxone"></div>
<div id="boxtwo"></div>
</div>
I'm try to do a special navigation-bar.
I will show it in pictures:
this on scrollbar on top
and this on scrollbar down:
So I tried to do header with position: fixed and z-index: 1.
inside nav with z-index high(1000) and
the right block with z-index high(1000)
and the content have z-index: 2 and position: relative.
and it didn't worked :/
**and important thing is that I need the upload div will be in the header
and will be higher (in z-index) from content
I will try to show you in code:
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
z-index: 1;
background-color: blue;
}
nav {
width: 100%;
height: 40px;
background-color: green;
z-index: 1000;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
z-index: 1000;
}
#content {
position: realative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header>
<nav></nav>
<div id="upload">
</div>
</header>
<div id="content">
</div>
thank you,and I'm sorry about my english !!
you will need to move the nav out of the header for the #content z-index to work and need to align nav with fixed positioning or by giving margin
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 80px;
background-color: blue;
z-index: 1;
}
nav {
width: 100%;
height: 40px;
z-index: 3;
background-color: green;
position: fixed;
top: 0;
right: 0;
left: 0;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
margin-top: 40px;
}
#content {
position: relative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header></header>
<nav>
<div id="upload"></div>
</nav>
<div id="content"></div>
Is it possible to position child element (C) under its parent (B), and above B's neighbor (C)?
It's a little bit difficult to describe, you can watch example here.
The question is to position blue div.inner above red div.neighbor AND under green div.outer.
To illustrate:
HTML code:
<div class="neighbor"> </div>
<div class="outer">
<div class="inner"></div>
</div>
CSS code:
.neighbor{
background-color: red;
height: 500px;
width: 500px;
}
.outer{
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
}
.inner{
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left:250px;
}
JsFiddle
HTML:
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
CSS:
.red {
background-color: red;
height: 500px;
width: 500px;
z-index: 1;
}
.green {
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
z-index: 3;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 250px;
z-index: 2;
}
.neighboor {
background-color: red;
height: 500px;
width: 500px;
position:fixed;
z-index:-200;
}
.outer {
background-color: green;
width: 300px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
}
.inner {
background-color: blue;
width: 100px;
height: 100px;
position:relative;
z-index: -100;
top: 0px;
left: 250px;
}