固定中心div旁边的div [英] Fixed div next to a centered div
问题描述
我有一个网页,其中有可滚动的内容。此内容包装在以页面为中心的#content内。
现在我想要一个导航栏向内容显示50px。
I have a webpage in which there is scrollable content. This content is wrapped inside #content, which is centered on the page. Now I want a navigation bar to appear 50px left to the content. This bar should have a fixed position (shouldn't scroll).
这是我到目前为止所尝试的:
This is what I have tried so far:
#nav {
position: fixed;
top: 50%;
margin-top:-200px;
left:15%;
background: #FFF;
width: 100px;
height:400px;
border-radius: 50px;
}
#content {
position: relative;
width: 800px;
margin: 0px auto;
padding-top: 100px;
}
这显然不是我想要的,因为现在nav是15%
Which is obviously not what I want, because now the nav is 15% from the left of the screen.
这是一张图片来说明我想要达到的效果。
Here's an image to illustrate what I want to achieve.
推荐答案
我已找到解决方案。
#nav{
left:50%;
margin-left:-550px;
}
我刚刚给它左:50%内容宽度+ 50像素+导航栏的宽度。
I just gave it left:50% and a margin-left of half the width of the content + 50px + the width of the navigation bar.
这篇关于固定中心div旁边的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!