html - 如何在某个 div 之上但在其子元素之下有一个元素？

Question

<div class="one"><div>

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

是否可以让类为 1 的 div 在父 div 之上但在子 div 之下？

Answer 1

好的，那又如何：

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

在这里查看。

Answer 2

这种方式更短：

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

在此处查看示例：http: //codepen.io/zitrusfrisch/pen/AzBfv

Answer 3

对的，这是可能的

这是一个例子

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