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>

我似乎已经尝试了固定的，相对浮动位置的每个组合，但注意似乎让我的4个div只是坐在固定的div下面。谁能让我知道我做错了什么？

任何帮助非常感谢

谢谢米克

小提琴Display Example

Answer 1

这是你要找的吗？

由于fixed位于绝对位置，因此它会被流出，使其他孩子无法行动，因此不会像您预期的那样被推倒。

通过为父级提供与fixed的高度相匹配的顶部填充，顶部将完成此操作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将级联DIV置于固定DIV下方

1 个答案: