CSS 向右浮动导航并固定位置?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14991732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:43:57  来源:igfitidea点击:

floating nav to the right with a fixed position?

csspositioncss-floatcss-position

提问by AMC

My site navigation needs to be floated to the right side of the container, but be in a fixed position so that whenever the page scrolls, the navigation is still on the right 350px from the top. This worked until I applied position:fixed, after doing that the navigation is stuck on the right. Any ideas how I can have the best of both worlds(right side, and fixed position)?

我的网站导航需要浮动到容器的右侧,但要处于固定位置,以便每当页面滚动时,导航仍然位于距离顶部 350 像素的右侧。这在我申请之前一直有效position:fixed,之后导航卡在右侧。我有什么想法可以两全其美(右侧和固定位置)?

http://jsfiddle.net/eeCgr/

http://jsfiddle.net/eeCgr/

回答by Brad M

The usage of position: fixed requires adjusting the top/right/bottom/left CSS to get your nav element to the desired location.

position:fixed 的用法需要调整上/右/下/左 CSS 以使您的导航元素到达所需位置。

For example:

例如:

nav { 
    right: 0; 
    top: 50%; 
}

or

或者

nav {
    right: 0; 
    top: 0;
}

回答by Emmanuel Lawrence

Method X:

方法十:

Just create the required division within another division.

只需在另一个部门中创建所需的部门。

Give postion:fixed; width:100%; properties to the outer div.

给位:固定;宽度:100%;属性到外部 div。

give float:right; property to the inside div.

给浮动:对;属性到内部 div。

Since the float and position properties are been given to two different divisions it would take effect. Make sure all other properties of the two divisions are identical.

由于浮动和位置属性被赋予两个不同的部门,它会生效。确保两个分区的所有其他属性都相同。

(to hide the outer div, change its alpha value (a) of the color to 0.00 with HSLa code)

(要隐藏外部 div,请使用 HSLa 代码将颜色的 alpha 值 (a) 更改为 0.00)