Wie kann ich die Position eines untergeordneten Elements nicht festlegen, obwohl das übergeordnete Element behoben ist?

Question

Wie der Titel sagt: Ich brauche die 'Info-Box' nicht zu fixieren, während der Head-Box und Head-in-Block fixiert sind.

Ich weiß, dass es möglich ist. Ich habe ein Live-Beispiel: http://www.marktplaats.nl/. Die orange Box ist fest (Head-Box), dann ist der weiße Teil (meine Info-Box) nicht fixiert. Und der Titelblock ist wieder fixiert (Kopf-in-Block).

Dies ist die CSS und HTML, die ich gerade benutze. Welche Anpassung muss vorgenommen werden, damit die mittlere (weiße) Box nicht fixiert wird?

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

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

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

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

 
.fixed{ 
 
\t 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

Haben Sie Jungs auf der Website sehen das gleiche ich tun?

Answer 1

Die Website, mit der Sie verbunden sind, blendet das weiße Feld aus, wenn die Kopfzeile klebrig ist. So zu tun, dass hier, würden Sie #info-box verstecken, wenn #head-block Klasse .fixed

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

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

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

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

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

 
.fixed{ 
 
\t 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