I have two sliders using ion-slides component and I've created a footer with two buttons (navigation buttons). Until there all right.
But... I have a form inside one of the sliders, so when I focus on a input text element, the virtual keyboardopens and moves the footer up, standing it in front of the form.
I know the hide-on-keyboard-open class, but this isn't inmediate (you can see how the footer is placed in front of the form for a couple of seconds), so I thought of use z-index
So, when the footer is moved upward, it is hidden under the form. But I can't get it work.
Maybe somebody can help me with this trouble?
My intention is that the green block is hidden under the blue block when they have contact... I've created a codepen to show this problem: https://codepen.io/anon/pen/QEBxRK?editors=1111
(since you can not open a virtual keyboard on a desktop computer, you can resize the height of the page to see that the z-index does not work)
Regards!
The z-index needs to be set to the .footerTest's sibling, the <ion-slides options="sliderOptions" slider="slider"> element.
An option would be to move the .footerTest inside the slides.
Below sample shows how the z-index apply on elements and its children.
Src: https://developer.mozilla.org/en/docs/Web/CSS/z-index
.dashed-box {
position: relative;
z-index: 3;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 2;
background: gold;
width: 65%;
left: 60px;
height: 7em;
top: 3em;
}
.green-box {
position: absolute;
z-index: 1;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 8em;
opacity: 0.9;
}
.red-box {
position: relative;
z-index: 0;
background: red;
height: 8em;
margin-bottom: 1em;
margin-top: -4em;
text-align: right;
}
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
<div class="red-box">Red box</div>
But, if you omit the z-index on the dashed-box and use a negative value, as on the blue box, the blue goes beneath them all.
.dashed-box {
position: relative;
/* z-index: 3; */
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 2;
background: gold;
width: 65%;
left: 60px;
height: 7em;
top: 3em;
}
.green-box {
position: absolute;
z-index: 1;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 8em;
opacity: 0.9;
}
.blue-box {
position: absolute;
z-index: -1;
background: lightblue;
width: 20%;
left: 25%;
top: -25px;
height: 18em;
opacity: 0.9;
}
.red-box {
position: relative;
z-index: 0;
background: red;
height: 8em;
margin-bottom: 1em;
margin-top: -4em;
text-align: right;
}
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
<span class="blue-box">Blue box</span>
</div>
<div class="red-box">Red box</div>
Related
I have 3 HTML elements that I want to order on the z plane:
.bank {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
z-index: 100;
transform: translateY(10%);
}
.card {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 300;
}
.button {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 30px;
top: 50px;
z-index: 200;
}
<div class="bank">
bank
<div class="card">card</div>
</div>
<div class="button">button</div>
I want the button to be on top of the bank but behind the card. But the button is always on top of both the bank and the card no matter what I try.
Edit: I noticed that removing z-index and transform from '.bank' solves it, but I need the transform property. What can I do?
What may cause it not to work? Thanks
Don't specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want.
.bank {
position:relative;
background: red;
width: 500px;
height: 200px;
}
.card {
position: absolute;
top:0;
z-index: 2;
height: 100px;
width: 400px;
background: blue;
}
.button {
position: absolute;
top: 0;
z-index: 1;
height: 150px;
width: 450px;
background: yellow;
}
.container {
position: relative;
}
<div class="container">
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
</div>
UPDATE
Considering you code, the only way is to remove the z-index and transform from .bank or it will be impossible because your elements will never belong to the same stacking context. As you can read in the previous link:
Each stacking context is self-contained: after the element's contents
are stacked, the whole element is considered in the stacking order of
the parent stacking context.
Related for more details: Why can't an element with a z-index value cover its child?
You can do this by adding z-index only to card class and placing the elements in absolute.
.bank {
width: 150px;
background: red;
height: 150px;
position: absolute;
top: 0;
left: 0;
}
.card {
width: 50px;
background: black;
height: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.button {
width: 100px;
background: blue;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
z-index pseude element over parent, but under the rest
So if I have two divs the first one(orange) should be over the second(green).
Then I add a pseude element that should be over the first one (orange) but under the second one (green.
https://jsfiddle.net/gnorg/1Lypbs3u/
.box {
width: 28px;
height: 34px;
background-color: #ff6d00;
position: relative;
top: 25px;
z-index: 6;
}
.box:before {
content: "";
position: absolute;
height: 25px;
width: 25px;
left: 20px;
background-color: #2d2d2c;
z-index: 4;
}
.box-under {
height: 25px;
width: 25px;
left: 25px;
position: absolute;
background-color: green;
z-index: 5;
}
<div class="box"></div> <!--orange-->
<div class="box-under"></div> <!--green-->
How is this possible?
So the black goes over orange and behind green (Dont mind sizes etc)
Here's example https://jsbin.com/rekaxa/edit?html,css,output.
I'd like to put that red circle(an icon) over the image, but to keep html straightforward. What's the best way(maybe totally different) to implement it?
You haven't said where you want the icon to be so I picked the dead center of the div.
div {
background-color: green;
width: 280px;
height: 180px;
position: relative;
}
img {
margin: 0 auto;
display: block;
}
div:after {
content: '';
position: absolute;
top: 50%; /* adjust as requiured */
left: 50%; /* adjust as required */
margin-top: -15px;
margin-left: -15px;
width: 30px;
height: 30px;
background: red;
display: block;
border-radius: 15px;
}
<div class="icon">
<img src="http://dummyimage.com/200x150/000/fff" />
</div>
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea