位置固定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

回答

相關問題