How can I get the position of a child element not fixed even though the parent is fixed?

Question

As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.

I know it is possible. I have a live example: http://www.marktplaats.nl/. The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).

This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?

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

<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

Do you guys see the website the same I do?

Answer 1

The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .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