即使父项已修复，如何才能使子元素的位置不固定？

Question

正如标题所说：我需要＆＃39;信息框＆＃39;在头箱和头部固定的情况下不固定。

我知道这是可能的。我有一个实例：http://www.marktplaats.nl/。 橙色框固定（头盒），然后白色部分（我的信息框）不固定。并且Title块再次被修复（head-in-block）。

这是我现在使用的css和html。需要做出哪些调整才能使中间（白色）盒子不固定？

＆＃13;

＆＃13;

#head-block{
	width: 100%;   
	height: auto;
	background: rgb(245,245,245);
	border: 1px solid grey;
	z-index: 1000;
	margin-top: 0px;
}

#head-box{
	height: 5px; 
	background: #37326a; 
}

#info-box{
	height: 50px; 
	background: white; 
	position: static;
}

#head-in-block{
	width: 1100px;
	height: 60px;
	color: #37326a;
	text-align: left;
	margin: auto;
	padding: 10px;
}

.fixed{
	position: fixed;
}

＆＃13;

<div id='head-block' class='fixed'>
    <div id='head-box'></div>
    <div id='info-box'></div>
    <div id='head-in-block'>
    </div>
</div>

<div style='height: 1500px;' id='content'>
  
</div>
Test

＆＃13;

＆＃13;

＆＃13;

你们看到网站和我一样吗？

Answer 1

当标题为粘性时，您链接的网站会隐藏白色框。所以，为了做到这一点，当#info-box有类#head-block

时，你会隐藏.fixed

.fixed #info-box {
  display: none;
}

#head-block{
	width: 100%;   
	height: auto;
	background: rgb(245,245,245);
	border: 1px solid grey;
	z-index: 1000;
	margin-top: 0px;
}

#head-box{
	height: 5px; 
	background: #37326a; 
}

#info-box{
	height: 50px; 
	background: white; 
	position: static;
}

#head-in-block{
	width: 1100px;
	height: 60px;
	color: #37326a;
	text-align: left;
	margin: auto;
	padding: 10px;
}

.fixed{
	position: fixed;
}
.fixed #info-box {
  display: none;
}

<div id='head-block' class='fixed'>
    <div id='head-box'></div>
    <div id='info-box'></div>
    <div id='head-in-block'>
    </div>
</div>

<div style='height: 1500px;' id='content'>
  
</div>
Test