让孩子DIV不是固定的位置父DIV较大

请看看下面的小提琴： https://jsfiddle.net/a9ravkf5/3/让孩子DIV不是固定的位置父DIV较大

#navbar{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height:40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 
#sidebar{ 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 0; 
 
    height:100%; 
 
    width: 200px; 
 
    background-color: black; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
    
 
} 
 

 
#content{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    min-height: 300px; 
 
    background-color: green; 
 
}

<div id="navbar"> 
 
</div> 
 

 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 

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

我要让蓝色元素大（宽）比固定位置的父元件。它将成为侧边栏内选择选项的下拉菜单，我希望它能够扩展内部的内容，而不是换行到多行（较大的高度）。

这样做的最佳解决方案是什么？

来源

2016-06-01 Lukas Arvidsson

您的小孩div大于包含的固定格。您无法看到全部的原因是因为您的#content div显示在您的固定#sidebar div的前面。

尝试添加z-index到#sidebar和#content的div像这样：

#sidebar { 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 0; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: black; 
 
    z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content. 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    min-height: 300px; 
 
    background-color: green; 
 
    z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar. 
 
} 
 

 
#navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 

 
#dropdown { 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
}

<div id="navbar"></div> 
 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 
<div id="content"></div>

来源

2016-06-01 06:14:56

谢谢！这工作:)。我认为它将默认为z-index为0，但现在我现在必须明确地设置它。 –

很高兴能够帮到你。元素的默认z-index是auto。这意味着由于你的content-div是在你的边栏div之后呈现的，所以它将被显示在最上面。 –

这是你需要什么？您需要在内容div和侧边栏上设置适当的z-index。

#navbar{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height:40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 
#sidebar{ 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 10; 
 
    height:100%; 
 
    width: 200px; 
 
    background-color: black; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
    
 
} 
 

 
#content{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    z-index: 0; 
 
    min-height: 300px; 
 
    background-color: green; 
 
}

<div id="navbar"> 
 
</div> 
 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 

 
<div id="content"> 
 

 
</div>

来源

2016-06-01 06:17:09 Paran0a

需要设置两件事情一个是你 '的z-index'，在#sidebar。另一个是#content中的'min-height'。

像

#sidebar{ 
    position: fixed; 
    top: 40px; 
    left: 0; 
    z-index: 10; 
    height:100%; 
    width: 200px; 
    background-color: black; 
} 
#content{ 
    position: absolute; 
    top: 40px; 
    left: 200px; 
    right: 0px; 
    min-height: 400px; 
    background-color: green; 
}

，如果你要修复它，然后还加的z-index：-1;在＃内容

来源

2016-06-01 06:44:00 Harshita

让孩子DIV不是固定的位置父DIV较大

回答

相关问题