问题描述:

I got part of it working. But for some reason it won't stay at the top.

CSS Navbox:

#navbox {

float: left;

width: 150px;

border: 1px solid blue;

border: thin solid #CCC;

background-color: #FFF;

border-radius: 4px;

padding: 5px;

position: fixed;

top: 92px;

z-index: 1000;

}

HTML Code:

<div id="navbox">

<div class="navigation">

<a href="#aeast">AFC East</a> <br />

<a href="#anorth">AFC North</a> <br />

<a href="#asouth">AFC South</a> <br />

<a href="#awest">AFC West</a> <br />

</div>

</div>

When It's not scrolled.

When I scroll

it's something to do with the top i guess.

It's in a container with the middle part.

container is:

#container {

width: 870px;

margin-top: 12px;

margin-left: auto;

margin-right: auto;

}

网友答案:

The only option here is to use JavaScript to determine scroll position prior to making the item position: fixed;. I recommend ScrollToFixed as it has support for boundaries and margins.

Update:

You can use position: sticky; (and with browser prefixes) [reference] in order to do this in more creative ways, and especially to fix it for iOS.

网友答案:

position:fixed is relative to the browser window, whereas position:absolute; is relative to the document, or closest parent with position:relative.

So in your case by using position:fixed, the div will always be 92px below the top of the browser window (top:92px). If you want it to scroll up (be the same distance from the top of the page), use position:absolute.


fiddles

  1. position:fixed - http://jsfiddle.net/yB45v/
  2. position:absolute - http://jsfiddle.net/43SZW/
网友答案:

you can give a position:fixed or position:absolute value to move the div any specific location on the page.

while using `position:absolute' the parent div position should be relative.

so the conclusion is you can set it by these 2 methods

.element{ position:fixed; top:2%; right:2%; }
.element{ position:absolute; top:50px; right:50px; } /*parent div should be in relative position.
相关阅读:
Top