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;
}
Related
After searching to center my div all I could get was margin: 0 auto; together with an assigned width, but still it not working.
My problem is simply centering a div. I have no idea why margin: 0 auto; isn't working.
Here is the layout of my CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}
<div class="countdown-box"></div>
It's because you are using position: absolute;. Change it to position: relative; and it will work.
The margin: auto works with elements with relative position. To center with absolute position should be like the following CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="countdown-box"></div>
Actually margin auto will allocate the available space, which means it doesn't has any relation with it is relative or not.
<div class="centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
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).
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.
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}