位置固定DIV下的级联DIV

我想创建一系列级联DIV，而不指定“顶部”位置。我只是希望他们能够显示一个固定的股利之下位置固定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

来源

2016-06-07 Mick

我不知道你想什么来实现这一点，为什么定格必须保持固定。（难道你不能'解开'它，让它成为'第一个孩子'？如果没有原因？顺便说一句，你真的是指“固定”吗？你的CSS说'位置：绝对'。 –

这是你找什么？

由于fixed位于绝对位置，因此它被排除在流动之外，因为其他孩子不在那里，因此不会像您预期的那样被推下。

通过给父母一个顶部填充匹配fixed的高度和顶部将做的伎俩。

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

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

来源

2016-06-07 19:42:10 LGSon

完美！谢谢，我需要研究CSS中的'block' – Mick

@Mick Your're欢迎，......也请查看'position：absolute' :) – LGSon

位置固定DIV下的级联DIV

回答

相关问题