Working on css trying to get one box under another. I was taught to use the z-index ; However when I give one css code a different z index nothing happens. Everything is correctly positioned however It doesn't position one under the other. What am I doing wrong with my z-index ?
This is my css so far. box1 should be shown above the check list and border
body
{
background: #afc2df;
}
#body
{
bottom: 0px;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
}
#box1
{
border: 250px;
border-style: groove;
border-radius:35px;
margin-left: 85px;
position fixed;
margin-top: 65px;
width: 17%;
z-index: 3;
}
#table1
{
position fixed;
height: 400px;
background: #0ff;
margin-left: 118px;
bottom: 90px;
}
#border
{
position: fixed;
border-style: solid;
width: 200px;
height: 150px;
padding: 2px;
background: #708090;
margin-left: 790px;
margin-top: -560px;
border-radius:35px;
z-index: 2;
}
#checklist{
position: fixed;
border-style: solid;
width: 220px;
height: 155px;
padding: 2px;
background: #708090;
margin-left: 790px;
margin-top: -80px;
z-index: 1;
}
.link {text-decoration: none;
}
Your problem will probably lay in nesting elements.
Parent element z-index is more important than the one of nested element, so if parent is bellow some element it's child can never be in front of that element.
Also the bigger z-index the more in front the element is.
#checklist is z-index 1 this mean it's behind #border and #box1
you have some missing ":" on position fixed on box1 and table1
position fixed;
shuld be?
position: fixed;
If the issue EricGS pointed out is not the problem (the missing :), then I agree with Hurda. Your issue may very well lie with nested elements. In which case, using !important as EricGS suggests will not work.
There is a thing called stack(ing) order for elements.
I have created a jsfiddle here for you to see the issue in action (and !important not working).
Related
I have this tricky CSS problem: I have this HTML and CSS:
.mark {
height: 30px;
width: 30px;
background: red;
position: absolute;
left: 30px;
bottom: 30px;
}
http://jsfiddle.net/mr_mohsen_rasouli/4Nb9L/
I want to red box stay in define position but when I scroll, it move!
how can I fix that?
Try this.. this may not be a good approach.
But will give you the desired result.
I place the div mark in another div
and give
.mark {
height: 30px;
width: 30px;
background:red;
position: fixed;
}
Full code is here
http://jsfiddle.net/4Nb9L/7/
you have used absolute,use fixed instead
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}
Use position : fixed and top reference for the .mark element
Example:
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
top:150px;
}
change the value of position property fixed instead of absolute and try.
.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}
Link : Updated Fiddle
I've got a modal style I'm using from http://tympanus.net/codrops/ but I've created a custom close button (.md-close) that I want to be truly fixed in the top right as the user scrolls the content of the modal window.
Code here: http://codepen.io/jeremypbeasley/pen/upzrB
Right now when you scroll, .md-close leaves the visible area, making it hard to close without scrolling up. How can I force this to stay put?
I realize this is something to do with the position property but I've tried every possible combination of the parents and children. Might this have something to do with the transform property I'm using?
Any help?
Full css i used :
or live : http://codepen.io/anon/pen/lynBm
.md-close {
position: fixed;
top: 3vw;
right: 3vw;
height: 50px;
border: 0px;
cursor: pointer;
width: 50px;
background: black;
text-indent: -9999px;
overflow: hidden;
display: block;
background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
background-size: 100%;
z-index: 99999;
}
.md-trigger {
width: 300px;
height: 300px;
background: blue;
text-indent: -99999px;
margin: 100px auto;
}
.md-modal {
width: 100%;
max-width: 100000000000px;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
transform: none;
backface-visibility: visible;
}
.md-content {
max-height: 100%;
overflow: auto;
padding: 10% !important;
}
.md-show.md-effect-12 ~ .md-overlay {
background-color: black;
}
I solved this problem by adding a max-height of 100vh to .md-content
I want to zoom the picture on hover.
So, it works so far but the end result isn't what I want.
When the picture zooms, it stops on the left side of the containing div and enlarges to the right side.
I already found the direction property but with that I can only switch the side behaviors. Something like direction: all would propably work, but it doesn't exist.
What I expect:
What I get:
See the JSFiddle
I recommend pure CSS without any JavaScript and jQuery code.
Here is one way of doing it:
#container {
margin: 0 auto;
width: 800px;
height: 400px;
/*overflow: hidden;*/
position: relative;
border: 1px solid red;
}
#container img {
position: absolute;
margin: auto;
top: 0px;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
/*transition: all 0.5s ease;*/
}
#container img:hover {
left: -5%;
width: 110%;
height: 110%;
}
Add left: -5% to you CSS rule for img:hover.
See demo at: http://jsfiddle.net/audetwebdesign/Em7yu/
I would like to have my "profile-stuff" div to appear over top of my "profile-wrap" div. I tried using z-index, but it doesn't seem to work. What am I doing wrong?
JSFIDDLE: http://jsfiddle.net/HCEN8/
My CSS:
#profile-stuff {
padding: 40px 40px 0px 40px;
height: 1000px;
width: 750px;
z-index: 150;
}
You need to add positioning to the element
#profile-stuff {
position: relative;
padding: 40px 40px 0px 40px;
height: 1000px;
width: 750px;
z-index: 150;
}
In order for z-index to work, you must also have a positioning property.
position: relative;
position: absolute;
position: fixed;
In order for z-index to work, your div with an id of profile-stuff needs to have a position property.
Modify your CSS like so:
#profile-stuff {
position: relative; // <-- Add this property
padding: 40px 40px 0px 40px;
height: 1000px;
width: 750px;
z-index: 150;
}
Add the position: relative to your #profile-stuff css and it should work fine.
I've modified you're fiddle accordingly. JSFiddle
The z-index CSS rule requires some kind of positioning; add any of the following rules to #profile-stuff:
position: relative;
or
position: absolute;
or
position: fixed;
The z-index property will only work for elements with their positioning defined. You need to set the 'position' property.
#profile-stuff {
padding: 40px 40px 0px 40px;
height: 1000px;
width: 750px;
position: absolute;
z-index: 150;
}
I've got two div elements in my webpage and I've included the CSS for the two elements.
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
When I re-size the browser for various resolutions the item-browsing element goes down. I've attached a screen shot of what I mean above.
How Can I fix this issue using CSS.
Thank you.
Give parent element of these two elements position: relative and change the following css related to #item-browsing.
#item-browsing {
height: 500px;
position: absolute;
right: 315px; /* or left */
left: 0;
top: 0;
bottom: 0;
min-width: 915px;
}
BTW, there are many posts based on this issue on SO.
Working Fiddle
Just put a wrapper around those two divs. like so:
#wrapper{
width: [your width];
clear: both;
padding: 0;
overflow: hidden;
}
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
Add a wrapper and set it's min-width with sum of width of both containing divs:
#wrapper {
min-width: 1230px;
}
Simplified demo
If the browser width is less than 915 (min-width)+315(width)=1230px the second div has no space on the right side.