右侧固定导航的居中内容导致z-index问题 [英] Centered content with right fixed nav causes z-index problem

问题描述

我有一个居中的容器布局，右侧固定的导航div。为了使固定导航在调整视口大小时保持原样，它在某些嵌套的div中进行了设置。问题是导航div最终位于内容的最前面。我可以更改z-index的顺序，但是我希望内容和导航都可访问，例如能够标记文本。有什么想法吗？下面是代码链接和显示布局结构的图像

I have a centered container layout with a right fixed nav div. To make the fixed nav stay in place when viewport resizes it's set up in some nested divs. Problem is the nav div ends up infront of the content. I can change the z-index order but I want both content and nav to be accesible as in being able to "mark" text for example. Any ideas on this? Below is link to code and and an image showing the layout structure

http://jsbin.com/aliru5/3/edit

推荐答案

您正在使此过程变得比其所需的更为复杂可以尝试以下操作：

You are making this more complicated than it needs to be, try this:

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

#container {
margin:0 auto; /* center container in browser */
overflow:hidden; /* clear floats */
width:900px
}
#content {float:left;width:640px}
#nav {float:right;width:240px}

这篇关于右侧固定导航的居中内容导致z-index问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！