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>
Related
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
I have two navbars inside #mobile-header that I want to get the page content to scroll behind. I can't get it working.
Here is a JS Fiddle for the sample code
And here is the code
<div id="mobile-header">
<div class="top-header"></div>
<div class="navbar-inverse"></div>
</div>
<div id="page-wrap"></div>
and the css
.top-header {
width: 800px;
height: 50px;
background: blue;
}
.navbar-inverse {
width: 800px;
height: 100px;
background: green;
}
#mobile-header {
z-index: 10;
position: fixed;
left: 0;
right: 0;
top: 0;
border: 5px solid yellow;
}
#page-wrap {
z-index: 1;
position: relative;
height: 1500px;
width: 800px;
background: red;
}
can anyone help
Please check this. I have modified some part of CSS.
.top-header {
width: 800px;
height: 50px;
background: blue;
}
.navbar-inverse {
width: 800px;
height: 100px;
background: green;
}
#mobile-header {
z-index: 9999;
position: fixed;
left: 0 right:0 top:0;
border: 5px solid yellow;
top: 0px;
}
#page-wrap {
z-index: 9;
position: relative;
height: 1500px;
width: 800px;
background: red;
margin-top: 160px;
}
<div id="mobile-header">
<div class="top-header"></div>
<div class="navbar-inverse"></div>
</div>
<div id="page-wrap"></div>
Hope this is helpful for you.
Thanks.
I am attempting to place an image (after) behind a parent image. I've used boxes as example of what I am trying to achieve - the blue box is supposed to be behind the green box but no matter what z-index I use it doesn't seem to work.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
z-index: 53;
top: 2%;
z-index: 2;
}
.box:after {
content: '';
//position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -3;
}
<div class="box-wrapper">
<div class="box"></div>
</div>
Remove the z-index of the box and add position:absolute for box:after
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
}
.box:before {
content: '';
position: absolute;
background-color: blue;
height: 50px;
width: 70px;
z-index:-2;
}
jsfiddle
The blue box is supposed to be behind the green box
Just remove all the irrelvant z-index values, then it works perfectly.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
color:white;
}
.box:after {
content: '';
position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -1;
}
<div class="box-wrapper">
<div class="box">I'm on top</div>
</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;
}
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/