I am having some trouble with safari and displaying a popup over a navigation element. For some reason the given z-index is ignored and the popup is hidden behind the navigation.
Here is the relevant HTML code:
<section class="application">
<header class="application-header"></header>
<nav class="application-navigation"></nav>
<div class="application-content">
<div class="wizard-background">
<div class="wizard-content">TEST TEST TEST TEST</div>
</div>
</div>
And here the less code
.application {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
&-navigation {
position: absolute;
background: green;
left: 0;
width: 200px;
bottom: 0;
top: 50px;
}
&-header {
position: absolute;
background: red;
top: 0;
left: 0;
right: 0;
height: 50px;
}
&-content {
position: absolute;
z-index: 81;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
background: yellow;
overflow-y: auto;
}
}
.wizard {
&-background {
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, 0.1);
}
&-content {
position: fixed;
top: 100px;
left: 150px;
width: 200px;
height: 200px;
background: white;
z-index: 101;
}
}
When you view this code in safari you can see that the "wizard-content" is partly hidden behind the "navigation-content". If you remove the z-index from "application-content" it works fine.
I also prepared a CodePen where you can see result, but you have to use safari to see the effect I mean.
Can someone explain what I am doing wrong? Or how safari works different than all other browsers regarding z-index.
I'm not sure why Safari messes up the z-index like that, but if you add transform: translate3d(0, 0, 0); to a parent element it usually starts acting normal.
here is a fork to your CodePen.
In this case I added it to .application
.application {
transform: translate3d(0, 0, 0);
}
Related
I'm new to html/CSS starting a few weeks ago and I decided work on my first template for my little gaming network and got a issue. The problem is I have a ideal header but when I do CSS for text over a header nothing shows up and the header is covering the text no matter what I do.
This how I would like have it + white text over it .
#header .h-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
Assuming you're trying to achieve a dark transparent bar that overlaps a background, you were close. You were setting the height to 100% in more than one way.
However, this is probably not the best way to go about it.
#header .h-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 40px;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
<div id="header">
<div class="h-bg">
</div>
</div>
If you need the dark transparent bar to be the navigation, you shouldn't use pseudo elements for it. Instead, a set of div elements is all you need.
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg{
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
.h-bg ul{list-style: none;}
.h-bg ul li{display: inline-block; padding: 0 10px;}
<div id="header">
<div class="h-bg">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
I have a div with a triangle as a pseudo element on top, and an image inside of this div, as you can see in this fiddle. I am trying to make the image contained within the bounds of the parent with the pseudo element, so that the image extends all the way through the triangle.
However, I am not sure how to do this. I have tried a few ways, including skewing the container etc but have not managed to create an elegant, responsive solution.
Please give me your suggestions if possible.
Edit: I am trying to make the image look like the following:
e.g. the ring is quite large and simply gets cut off by the containing element.
.bg {
background: black;
color: white;
position: relative;
filter: drop-shadow(0 0 3vh rgba(30, 14, 43, 1));
height: 20vh;
width: 100vw;
margin: 30vh 0;
}
.bg::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
display: block;
border-bottom: 18vh solid black;
border-right: 12vw solid transparent;
border-left: 88vw solid transparent;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
<div class='bg'>
<div class='container'>
<img src='http://pngimg.com/uploads/jewelry/jewelry_PNG6788.png' class='ring'>
</div>
</div>
You may try to have the shape as one element and consider some rotation transform and overflow:hidden :
go full page for better result
body {
margin: 0;
}
.bg {
color: white;
position: relative;
height: 90vh;
overflow: hidden;
text-align: right;
}
.container {
position: absolute;
filter: drop-shadow(0 0 3vh rgba(30, 14, 43, 1));
height: 160%;
transform: rotate(-20deg);
top: 42%;
left: -2%;
right: -4%;
background: #000;
overflow: hidden;
}
img {
position: absolute;
top: 15%;
left: 61%;
transform: translate(-50%, -50%) rotate(20deg);
]
<div class='bg'>
<div class="container">
<img src='http://pngimg.com/uploads/jewelry/jewelry_PNG6788.png' class='ring'>
</div>
</div>
Basically .second has to be above .third. Which only is in Firefox though. Unfortunatelly I can't move .second out of .fifth, which is why it is giving me such a hard time.
For further information: .third is supposed to be a modal background to darken the content .fifth and the footer .fourth. The modals content is .second. The Web-App is supposed to be for Safari on iPad.
JSFiddle
<div class="first"></div>
<div class="fifth">
<div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>
.first{
z-index: 10;
/* styling */
position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
z-index: 9;
/* styling */
position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
}
.third{
z-index: 8;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
}
.fourth{
z-index: 7;
/* styling */
position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
}
.fifth{
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}
Give .fifth a z-index greater than .third.
.first{
z-index: 10;
/* styling */
position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
z-index: 9; /* You probably do not need this */
/* styling */
position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
}
.third{
z-index: 8;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
}
.fourth{
z-index: 7;
/* styling */
position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
}
.fifth{
z-index: 9;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}
<div class="first"></div>
<div class="fifth">
<div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>
Managed to move .second out of .fifth in the end. Works for me, unfortunately no satisfying answer.
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>
Seems Google Chrome 36 is broken and does not understand top:50% in my example.
IE 11, Opera 12.17 and Firefox 31 work just fine. Chrome and Safari are broken (and I guess other WebKit/KHTML browsers are broken too).
<div class="box_outer">
<div class="box_inner">
<div class="box">
<h1>Hello</h1>
</div>
</div>
</div>
<style>
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: relative;
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
</style>
I know I can do the following:
.box_outer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
But this is not a solution to the problem just a different approach.
How can I fix it for Chrome with minimal changes?
You can test it on JSBIN here
Ok, here's the fix. For me it seems like a bug in Webkit browsers.
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: absolute; /* INSTEAD OF relative */
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
I am not clear what you are trying to do here, but the result that you are getting in other browsers can be achieved in crome using:
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: fixed;
}