html - 将级联 DIV 置于固定 DIV 下方

Question

我想在不指定“顶部”位置的情况下创建一系列级联 div。我只想让它们显示在固定的 div 下

我的 CSS 是这样的

.fixed {
position:absolute ; 
margin:10px ;   
height:50px ;
width: 400px ;
background-color:#3640A8;
top: 30px ;     }

.AllTabs {
   display:block;
   margin:10px ;    
   height:30px ;
   width: 200px ;
   background-color:#B53133;        
}

我的基本代码是

<div class="Background">
 <div id="fix" class="fixed"> This is fixed </div>
 <div id="dv1" class="AllTabs"  >Underneath Fixed Div </div>
 <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
 <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
 <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
</div>

我似乎已经尝试了固定的、相对的 float 位置的每一种组合，但注意到似乎让我的 4 个 div 正好位于固定的 div 之下。谁能让我知道我做错了什么？

非常感谢任何帮助

谢谢米克

fiddle Display Example

Answer 1

这是你要找的吗？

由于 fixed 是绝对定位的，它被从流中取出，使其他 child 表现得好像它不存在一样，因此不会像您预期的那样被推下。

通过为父级提供与 fixed 的高度和顶部相匹配的顶部填充即可达到目的。

.Background {
  padding-top: 80px;
  background-color:#E9BF79;
  height:90%  
}
.fixed {
  position:absolute ; 
  margin:10px ;	
  height:50px ;
  width: 400px ;
  background-color:#3640A8;	
  top: 30px ;
}
.AllTabs {
  display:block;  
  margin:10px ;	
  height:30px ;
  width: 200px ;
  background-color:#B53133;		
}

<div class="Background">

  <div id="fix" class="fixed"> This is fixed </div>

  <div id="dv1" class="AllTabs"  >Underneath Fixed Div </div>
  <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
  <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
  <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
  
</div>