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.
Related
I want to add blur behind text up to some amount of padding. I don't want some div behind and blur the div, I want it to be bound to the text.
Here is my attempt:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.image {
z-index: -1;
object-fit: cover;
}
.text {
z-index: 2;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
}
.text::before {
content: "";
position: absolute;
z-index: 1;
top: -5px;
bottom: -5px;
left: -15px;
right: -15px;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<img class="image" src="https://source.unsplash.com/random" />
<h1 class="text">Example Text</h1>
</div>
I am getting like this:
I want the edges to be not blurred.
I want something like below:
You can consider overflow:hidden to stop the blur effect and have a sharpe edge. I also considered padding instead of adjusting top/left/right/bottom:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.text {
z-index: 1;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
padding: 12px 22px; /*added this*/
overflow: hidden; /*added this*/
}
.text::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<h1 class="text">Example Text</h1>
</div>
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);
}
I'm creating a react-modal that animates in from the bottom of the screen. Once the modal is displayed, I need the modal to have a fixed/sticky footer that is fixed to the bottom of the browser window. For some reason, currently the footer is rendering off the screen using the standard:
position: absolute;
bottom: 0;
left: 0;
right: 0;
Please see the attached code.
.ReactModal__Overlay--after-open {
opacity: 1;
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(46,46,51,.95);
}
.ReactModal__Content--after-open {
z-index: 100;
position: relative;
width: auto;
max-width: 500px;
margin: 0 auto;
bottom: 0%;
background-color: #FFF;
}
.wrapper {
background: yellow;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 112px;
width: 480px;
max-width: 480px;
margin: 0 auto;
border-radius: 12px 12px 0 0;
height: 100vh;
background: white;
}
.contentBody {
background: pink;
}
.contentFooter {
background: orange;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="ReactModal__Overlay ReactModal__Overlay--after-open">
<div class="ReactModal__Content ReactModal__Content--after-open">
<div class="wrapper">
<div class="contentBody">BODY</div>
<div class="contentFooter">FOOTER</div>
</div>
</div>
</div>
What am I doing wrong which is preventing the footer within the modal from being fixed at the bottom of the screen?
Try this.
.ReactModal__Overlay--after-open {
opacity: 1;
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(46,46,51,.95);
}
.ReactModal__Content--after-open {
z-index: 100;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: auto;
max-width: 500px;
margin: 0 auto;
bottom: 0%;
background-color: #FFF;
}
.wrapper {
background: yellow;
position: relative;
margin: 0 auto;
border-radius: 12px 12px 0 0;
height: calc(100vh - 115px);
background: white;
}
.contentBody {
background: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.contentFooter {
background: orange;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div class="ReactModal__Overlay ReactModal__Overlay--after-open">
<div class="ReactModal__Content ReactModal__Content--after-open">
<div class="wrapper">
<div class="contentBody">BODY</div>
<div class="contentFooter">FOOTER</div>
</div>
</div>
</div>
</body>
I have a modal popup that I have an aspect ratio of 16:9.
I want to vertical centre the blue popup on the screen and still always maintain the aspect ratio.
<div class="modal">
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
</div>
css
.modal {
width: 100%;
height: 100%;
background: #333;
opacity: 0.85;
position: absolute;
left: 0;
top: 0;
}
.parent {
position: relative;
width: 80%;
margin-left: 10%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
border-radius: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
color: white;
font-size: 24px;
text-align: center;
}
This is a demo of what I have. DEMO
Here is a one div solution. I do not like to use transform to get vertical center as you can get blurry text at odd height values.
https://jsfiddle.net/nqL10ezp/2/
.modal {
position: absolute;
height: 0px;
width: 80%;
padding-bottom: calc(100% * 9 / 16);
background-color: #F00;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parent {
position: absolute; /* instead of relative */
top:50%; /* push to 50% top */
transform: translateY(-50%); /* bring back at -50% own height */
.parent {
position: absolute; /* instead of relative */
top:50%; /* push to 50% top */
transform: translateY(-50%); /* bring back at -50% own height */
width: 80%;
margin-left: 10%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
color: white;
font-size: 24px;
text-align: center;
}
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
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>