即使 parent 已固定，我如何才能获得未固定的 child 元素的位置？

Question

正如标题所说：我需要'info-box'不固定，而head-box和head-in-block固定

我知道这是可能的。我有一个活生生的例子：http://www.marktplaats.nl/。橙色框是固定的（head-box）然后白色部分（我的info-box）是不固定的。并且标题栏再次固定（head-in-block）。

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

#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

你们和我一样看这个网站吗？

Answer 1

当 header 为粘性时，您链接到的网站会隐藏白框。所以要在这里这样做，当 #head-block 有 class .fixed

时，你会隐藏 #info-box

.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

即使 parent 已固定，我如何才能获得未固定的 child 元素的位置？

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

html

css

styles

position

fixed