Random CSS Thought: Background-z-index
In my…quest..to use as less code as possible, i ran into another random CSS thought.
Now, this one is a bit more abstract, and sort of hard to explain, so please bare with my while I try. I’d appreciate it if you would want to point out when any of my descriptions are unclear in the comments.
How it came to being #
When working on a new website, I wanted to use the least amount of code possible. I have rounded corners on the main content, but I didn’t want to use additional divs to view the top and bottom background images. So I used the navigation background for the top, and the footer background for the bottom:
<ul id="nav">...</ul>
<div id="content">...</div>
<div id="footer">...</div>
And the CSS:
#nav {
background:url("../images/nav.png") no-repeat 0 0;
}
#content {
background:url("../images/contentbg.png") repeat-y 0 0;
}
#footer {
background:url("../images/footer.png") no-repeat 0 0;
}
The three of these make up the visual box surrounding the actual content. the only problem was, that I had to use a negative top margin on <div id="content">
to get the content up to where I wanted it. Sadly, this caused the background of <div id="content">
to lay over the background of <ul id="nav">
.
This is all logical, given the way CSS works, but it was still inconvenient. I had to use an additional div in <div id="content">
to make up for the lost background.
Background-z-index #
As the name implies, this thought up CSS property would define the z-index, but only of the background of an element. This way I would be able to position the <ul id="nav">
background above the <div id="content">
background, but leaving the the actual content on top of both.
example:
#nav {
background:url("../images/nav.png") no-repeat 0 0;
background-z-index: +1;
}
Because <div id="content">
is placed right below <ul id="nav">
in the source, it has a z-index of 1 higher then <ul id="nav">
. By defining the background-z-index of <ul id="nav">
to be 1 higher, the background of <div id="content">
gets behind the background of <ul id="nav">
. But the content would still be on top of it.
Why +1, instead of using the number the current Z-index uses? This way you don’t have to find out the current background-z-index first, like you have to do with z-index now*. Instead just state that you want the background to be 1 layer higher then it’s current background-z-index.
* Unless, of course, you use z-index:99;
, but that’s a whole other use.
I’m not certain how often I would need this, and I realize that it’s quite an abstract concept, but I’m certain there have been more people with this problem. What do you think, would it be a nice addition to the css toolset?