By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

does positioning type effect z-index

P: n/a
I'm trying to display a background image of a <div id="footer"> over content
in another <div id="content>, however the <div> with the lower z-index is
displaying over the other. Note that <div id="content"> is relatively
positioned.

Does anyone have an idea of what is wrong here?
http://www.boatingaccessories.com.au...p/template.asp

#footer {margin-top: 79px;
background-color: #afb8e6;
text-align: center;
width: 100%;
padding-top: 20px;
padding-bottom: 10px;
background: url(images/curve_bottomleft.gif) 15px -10px no-repeat;
z-index: 15;
}

#content {position: relative;
top: 95px;
left: 30px;
border-right: 2px solid #AFB8E6;
color: #000;
font-size: 14px;
padding: 15px 20px 30px 20px;
border-left: 4px solid #ffa446;
border-top: 4px solid #ffa446;
border-bottom: 4px solid #ffa446;
background: #e6e9f9;
z-index: 5;
width: 723px; /* false value for IE4-5.x win*/
voice-family: "\"}\"";
voice-family:inherit;
width: 677px; /* correct */
}
html>body div#container {width:677px;} /* be nice to opera */

Appreciate any suggestions
David

http://www.boatingaccessories.com.au...p/template.asp
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"David Ehmer" <eh****@bigpond.com> wrote:
I'm trying to display a background image of a <div id="footer"> over content
in another <div id="content>, however the <div> with the lower z-index is
displaying over the other. Note that <div id="content"> is relatively
positioned.


z-index only applies to positioned elements.

So it applies to your content div but not to your footer div. Hence
the content is on top of the footer.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
"David Ehmer" <eh****@bigpond.com> wrote:
I'm trying to display a background image of a <div id="footer"> over content
in another <div id="content>, however the <div> with the lower z-index is
displaying over the other. Note that <div id="content"> is relatively
positioned.


z-index only applies to positioned elements.

So it applies to your content div but not to your footer div. Hence
the content is on top of the footer.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
Thanks Steve,

Easy to overlook the little things.

David
"Steve Pugh" <st***@pugh.net> wrote in message
news:k6********************************@4ax.com...
"David Ehmer" <eh****@bigpond.com> wrote:
I'm trying to display a background image of a <div id="footer"> over contentin another <div id="content>, however the <div> with the lower z-index is
displaying over the other. Note that <div id="content"> is relatively
positioned.


z-index only applies to positioned elements.

So it applies to your content div but not to your footer div. Hence
the content is on top of the footer.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Jul 20 '05 #4

P: n/a
Thanks Steve,

Easy to overlook the little things.

David
"Steve Pugh" <st***@pugh.net> wrote in message
news:k6********************************@4ax.com...
"David Ehmer" <eh****@bigpond.com> wrote:
I'm trying to display a background image of a <div id="footer"> over contentin another <div id="content>, however the <div> with the lower z-index is
displaying over the other. Note that <div id="content"> is relatively
positioned.


z-index only applies to positioned elements.

So it applies to your content div but not to your footer div. Hence
the content is on top of the footer.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.