如何在另一个div内顶部对齐div

Question

您好

我想将div2顶部与div1的边框对齐

到目前为止，我已经为div 2尝试过这个但是效果不好

element.style {
    float: right;
    position: relative;
    vertical-align: top;
}

这没有将div对齐到顶部位置，是什么可以使其顶部对齐？

Answer 1

我会像之前所说的那样在孩子身上使用position: absolute;实现这一点，但不是在DOM中添加额外的div来模拟使用空间，我会使用伪元素 （更确切地说，::before pseudo-element）。

这是我用它的结构：

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

    </div>
    <h1>Start</h1>
</div>

类父的div需要为position: relative;，并且子项必须是绝对的，并设置为top: 0;，如以下行所示：

.child {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: #000;
}

您需要将此元素设置为固定的高度和宽度，否则将无效。

这种方法的问题是你的div会超过.parent div的前100px。

要解决这个问题，我们需要在.parent div上创建一个伪元素，它将模拟该空间并使一切工作更好：

.parent:before {
    display: block;
    content: ' ';
    width: 100%;
    height: 100px;
}

这是一个带有示例代码的小提琴，希望这可以帮到你！

http://jsfiddle.net/m54rxwjv/2/

PS：这只有在您知道身高始终为100px时才有效。

Answer 2

给出相对于父div的位置，并将绝对位置设置为内部div。不要忘记设置顶部：内部div为0px，之后你的内部div将始终位于父div的顶部。

#div1{position:relative;}
#div2{position:absolute;top:0px;}

Answer 3

.div1{
box-sizing: border-box;
  border: 3px solid red;
  height: 150px;     
  width: 30px;
}
.div2{
box-sizing: border-box;
border: 3px solid green;
margin: -3px;
height: 30px;
width: 30px;
}

<div class="div1">
<div class="div2"></div>
</div>

Answer 4

.div1{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
}

.div2{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
top:0;
left:0;
}

div2始终位于顶部

Answer 5

根据Vipul的回答，我已经在jsfiddle上创建了针对相同行为的代码：

http://jsfiddle.net/zo6jdp4b/1/

我还在顶部放了一个额外的div，以便在子div css中没有任何问题：

.childDiv{
border: 1px solid blue;
height: 10px;
width: 30px;
position:absolute;
top: 0px;

}

Answer 6

将顶部div设置为具有粘性的另一个div。 喜欢：

.div2 {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

应将它作为div2放置在div1元素中，例如，您在其中具有溢流y：在设置的高度上滚动（波纹管内容垂直滚动）。