如何讓元素在某個div上方但在其下方？

Question

<div class="one"><div> 

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

是否有可能讓一個類的div高於父div，但低於子div？

Answer 1

是的，這是可能的

here is an example

HTML

<div class="one"> 1 </div> 

<div class="parent"> 
    parent 
    <br/> <br/> <br/> <br/> 
    <div class="child"> 
     child 
    </div> 
</div> 

CSS

.one{ 
    background:yellow; 
    height:30px; 
    width:100px; 
    position:absolute; 
    top:50px; 
} 

.parent{ 
     background:green; 
    height:300px; 
    width:100px; 
} 

.child{ 
    background:black; 
    height:100px; 
    width:60px; 
} 

Answer 2

好吧，關於什麼：

HTML

<div class="one">One 
</div> 

<div class="parent">Parent 
    <div class="child">Child 
    </div> 
</div> 

CSS

.one { 
    margin-top: 100px; 
    background: blue; 
    height: 200px; 
    width: 100px; 
} 

.parent { 
    background: yellow; 
    height: 100px; 
    width: 100px; 
    position: relative; 

} 
.child { 
    position: absolute; 
    background: green; 
    height: 100px; 
    width: 100px; 
    top: -300px; 
} 

檢查出來here。

Answer 3

這樣更短：

.one { margin-top: 100px; } 
.child { width: 100%; height: 100px; position: absolute; top: 0; } 

在這裏看到一個例子：http://codepen.io/zitrusfrisch/pen/AzBfv