Question

<div class="one"><div>

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

是否可以让class为1的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

如何将元素置于特定div之上但低于它的孩子？

3 个答案: