固定的div旁边的居中格

我有一个网页，其中有可滚动的内容。该内容被包裹在#content中，该内容以页面为中心。现在我想要一个导航栏在内容的左边显示50px。这个栏应该有一个固定的位置（不应该滚动）。固定的div旁边的居中格

这是我到目前为止已经试过：

#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; 
}

这显然不是我想要的，因为现在的资产净值从屏幕左侧15％。

下面是一张图片来说明我想实现的目标。 Paint example

来源

2013-03-26 Yellos

拿一个div的导航，然后给它一个相对或绝对的位置。 – 2013-03-26 21:53:49

我已经找到了解决方案。

#nav{ 
left:50%; 
margin-left:-550px; 
}

我刚刚给它留下了：50％左右的内容宽度的一半+ 50px +导航栏的宽度。

来源

2013-03-26 21:58:28 Yellos

只是把nav内content

<div id="content"> 
    <div id="nav"></div> 
    ..... 
    ...... 

</div>

然后

#nav { 
position: fixed; 
top: 50%; 
margin-top:-200px; 
left:-100px; 
background: #FFF; 
width: 100px; 
height:400px; 
border-radius: 50px; 
}

来源

2013-03-26 21:53:46

这不起作用 – Yellos 2013-03-26 21:56:53

有一个有点棘手的解决方案。与position: fixed元素总是相对于浏览器窗口（更少）。这意味着即使设置了position: relative，它也会始终忽略它的父维度和位置。 解决方案根本不设置left。

这里就是你需要做的： HTML

<div class="content"> 
    <div class="fake"> 
    <div class="nav"></div> 
    </div> 
    content 
</div>

CSS

.fake { 
    position: absolute; 
    left: -50px; 
    top: 0; 
} 
.nav { 
    position: fixed; 
    top: 50px; 
    width: 40px; 
    height: 100px; 
    background: #c11; 
} 
.content { 
    position: relative; 
    width: 800px; 
    height: 1000px; 
    margin: 0px auto; 
    background: #ccc; 
}

Working example.

当然某些值作秀。

来源

2013-03-26 21:58:19

固定的div旁边的居中格

回答

相关问题