How to? CSS "Position:Absolute" constant Margin-Top? Possible?_问答_开发者

How to? CSS "Position:Absolute" constant Margin-Top? Possible?

开发者 https://www.devze.com 2023-02-03 23:17 出处：网络

This question sounds simple, but I\'m an expert with CSS and I\'m thinking it\'s impossible (a RARE thing).

This question sounds simple, but I'm an expert with CSS and I'm thinking it's impossible (a RARE thing).

Is it possible to use CSS to give a <div>开发者_JS百科 a constant top margin if that <div> has no background (e.g. you can see through it)?

Basically, I want the background image to be visible in the top 100px of a site, so that even when scrolling down, that top-margin remains in place.

You can look at some live code here:

http://www.codemyconcepthq.com/projects/2453/

Here's a little infographic of what I'm attempting to do:

http://cl.ly/40bD

Thanks!

One solution you could try is to cut the top of the background (this image: http://www.codemyconcepthq.com/projects/2453/images/bg-body.png) and you set it as the background of your header.

So when you scroll down, the content will go under your header and you will not see that content because your header will have a background.

Edit:

Instead of cutting the background like I said, just set the background of your header to the same image used for the main background. That will prevent the browser from having to download two images (which is useless because the images are the same).

Looking at the code, I think the best you can do is pop another <div> <div id="header">, apply the <body>’s background image to <div id="header">, and then apply your translucent image to the <div> you put inside. Then the scrolling content will then be hidden by <div id="header">’s new background.

So, HTML:

<div id="header"><!-- Begin Header -->
    <div id="header-inner">
    </div>
</div>

And CSS:

#header {
    background:url("../images/bg-body.png") no-repeat fixed center top #000000;
}

#header-inner {
    background:url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
}

You can achieve the same effect by placing a non-transparent background that is exactly the same as the background behind the header part, in the very same area, and have the content (#wrapper in your case?) go behind that.