On Chrome and Safari (on the ipad) everything displays as it should. However, when I "add to home screen", only my background image shows, and the other divs dont. I think it might have something to do with the z-index or position of the other divs, but I can't figure out what to do.
CSS
#map{ background: url('img/map.png');}
#map_gate{
z-index: 100;
width: 299px;
height: 313px;
top: 149px;
left: 539px;
position: absolute;
background: url('img/map_gate_closed.png');}
#map_dora{
z-index: 200;
width: 65px;
height: 91px;
top: 473px;
left: 83px;
position: absolute;
background-image:url('img/map_dora.png');}
.background{
z-index: 1;
top: 0;
left: 0;
width: 1024px;
height: 768px;
position: fixed;
display: none;
overflow: hidden;}
.selected_area {
z-index: 10;
text-align:center;
position: fixed;
display: none;
/*background-repeat:no-repeat;*/
overflow: hidden;}
HTML
<div id="map" class="background map"></div>
<div id="map_gate" class="selected_area map"></div>
<div id="map_dora" class="selected_area map"></div>
Related
I have a CSS problem with a couple of parts. The first part is that I need an absolute positioned :after element to be visible above a fixed position element. The second part is that I need to be able to have a modal as a child of that fixed element that will cover the whole screen. Here's a simplified version of my app.
HTML
<body>
<div class='header'></div>
<div class='nav'></div>
<div class='content'>
<div class='modal'></div>
</div>
<div class='footer'></div>
</body>
CSS
.header {
position: fixed;
height: 50px;
width: 100%;
}
.nav {
position: fixed;
top: 50px;
height: calc(100vh - 100px);
width: 100px;
z-index: 1;
}
.nav:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin: auto;
height: 0;
border-left: solid 10px black;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
.content {
position: fixed;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
A codepen: https://codepen.io/winterblack/pen/ypBOqz
I can either have a z-index: -1 on my content element, or a z-index: 1 on my nav element. Either way, it gets in the way of the modal, which must have the content element a its parent.
The best solution I can think of right now is to use z-index: -1 on the content element, and remove it when the modal is opened. That will have the strange effect of having the absolute element disappear while the modal is opened...not too big of a deal probably, but not ideal. Any other ideas?
If you changed the position of content to relative, would that be an ok compromise for what you're trying?
.content {
position: relative;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
background: aquamarine;
}
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
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 have a problem of rendering in webkit browsers.
<div class="left">
<div class="fixed"></div>
</div>
<div class="container">
<div class="square"></div>
</div>
.left {
position: absolute;
top: 100px;
left: 10px;
width: 100px;
height: 300px;
background: red;
z-index: 2;
overflow-y: hidden;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 90px;
z-index: 2;
background: blue;
}
.container {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 500px;
background: grey;
overflow-y: hidden;
z-index: 1;
}
.square {
margin-left: 120px;
margin-top: 120px;
width: 40px;
height: 53px;
z-index: 481;
background: green;
-webkit-user-drag: none;
-webkit-user-select: none;
position: absolute;
}
My fixed element is not visible : http://jsfiddle.net/RV5WP/3/
But it's work if I delete the webkit transform : http://jsfiddle.net/RV5WP/2/
I tried to add translatez(0) to my fixed element or to the parent but that doesn't solved my problem.
I can't reproduce in firefox or opera.
Does anyone have an idea ?
I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you in advance.
EDIT: here is the code I used:
<body>
<div class="Wrapper-Top">
</div>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
</body>
.Wrapper-Top {
min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background:url(img/header-bg.png)
repeat-x 50% 0%;
z-index: 20;
}
.Wrapper-Middle {
min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 160px;
left: 0px;
position: absolute;
z-index: 10;
text-align: center;
}
You are missing a position attribute on .Wrapper-Top.
z-index on MDN
Initial value: auto
Applies to: positioned elements
Inherited: no
When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.
i think this is what you want..
<body>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
<div class="Wrapper-Top">
</div>
.Wrapper-Top{ min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background: url(img/header-bg.png) repeat-x 50% 0%;
z-index: 20;
position: absolute;
}
.Wrapper-Middle{min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}
use position absolute both of this and give highest z-index value what you want to top of anothe one. like this
.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}