3 replies [Last post]
KyleHarrison
KyleHarrison's picture
Offline
newbie
Last seen: 10 years 11 weeks ago
Timezone: GMT-8
Joined: 2010-11-08
Posts: 4
Points: 6

This one might actually be a simple one for someone. Im in particular quite new to CSS Styling, and especially how z-index apparently works.

This is all i want to do: when a user clicks a link, a hovering modal window appears above the content.
If i can swing it right I would also like to have the background fade out.

I know theres downloadable modal windows and stuff, but I really want to figure this one out on my own, and the only thing holding me back now is my basic understanding of how z-index functions, because its not functioning how I think its supposed to, haha.

So here it is:

in my current setup, there is a content DIV, and inside that DIV are three separate DIVs.
The three DIVs are: weap-types, weap-main and EditWin. heres the CSS:

#content
{
	position: relative;
	background: #CACCB4;
	font: 0.9em "Trebuchet MS", verdana, sans-serif;
	height: auto;
	text-align: justify;
	top: 100px;
	padding: 0px 3% 0px 3%;
	z-index: 0;
	margin-left: 20%;
	width: 54%;
}
#weap-types
{
	float:left;
	border: solid #999;
	padding: 5px;
	position: relative;
	z-index: -1;
}
#weap-main
{
	left: 0px;
	padding: 10px;
	position: relative;
	z-index: -1;
}
#EditWin
{
	position: relative;
	width: 500px;
	height: auto;
	margin: 0px auto;
	margin-top: 0;
	background-color: #000;
	z-index: 1;
}

Content is loaded dynamically into all three of those DIVs.

The important thing here, is that the EditWin is pushing the other two DIVs down instead of appearing in front of them.
Maybe im just not sure what the hell "stacking contexts" are, but this is getting a little frustrating...

if you must see the page, her you go: http://blackjaguarstudios.com/AirFragger/home.php?page=Weapons

I hope someone can help! This site has been especially useful so far Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If EditWin is supposed to

If EditWin is supposed to appear over the top of other elements, you'll need to use position: absolute.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

KyleHarrison
KyleHarrison's picture
Offline
newbie
Last seen: 10 years 11 weeks ago
Timezone: GMT-8
Joined: 2010-11-08
Posts: 4
Points: 6

Really? that seems weird...

Really? that seems weird... why does it have to be absolute positioned? Cant relatively positoned elements be re-ordered using z-index??

Thats not quite what botheres me though, the reason i didnt want to use AP is now the box wont center using the auto 0 margin technique. How do i center this box on the page using CSS? Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Try left:0;right:0; and your

Try left:0;right:0; and your auto margins - won't work for most versions of IE. The other approach is to offset by 50% then drag back the element to it's proper center by using a negative left margin with a value half of the elements actual width.

When using position absolute remember that it's offsets are taken from it's nearest positioned parent, by positioned that means other than default 'static' generally one ensures that is done by adding position:relative to the block we want position absolute to reference and stay within.

'Stacking Context' is the term used to refer to the order in which elements are placed on the canvas, there is a natural order given as one lays elements down starting with 0 and working up the first element stated sits at the bottom all subsequent elements sit on top of the previous as it were (even though they do not visually appear to).

There have been some pretty good explanations of z-index and stacking contexts in the past so please have a search through the forum archives for more detailed explanations and do always do a search first on these sorts of subjects as it will generally throw up a few good posts.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me