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

嗨

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

到目前为止，我已经尝试了第2部分，但效果并不好

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

---

这没有使div在顶部位置对齐，有什么方法可以使其顶部对齐？

给出相对于父div的位置，以及相对于内部div的绝对位置。不要忘记为内部div设置top:0px，在此之后，您的内部div将始终位于父div的顶部

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

.div1{
框大小：边框框；
边框：3倍纯红；
高度：150像素；
宽度：30px；
}
.第2分部{
框大小：边框框；
边框：3倍纯绿；
保证金：-3px；
高度：30px；
宽度：30px；
}

---

根据Vipul的回答，div2始终位于顶部，我在JSFIDLE上为相同的行为创建了代码：

我在顶部添加了一个额外的div，这样子div css中就不会出现任何问题：

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

---

}

我将使用

位置：绝对，但我将使用伪元素（更准确地说，是）

这是我用于它的结构：

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

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

不过，您需要将此元素设置为固定的高度和宽度，否则它将无法工作

这种方法的问题是，您的div将超过
.parent
div的前100像素

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

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

这里是一个工作小提琴与示例代码，希望这能帮助你


注：只有当您知道高度始终为100px时，这才有效。
使用sticky将顶部div设置在另一个div中。
比如：

它应该作为您的div1元素中的div2放置（例如）overflow-y：在设置的高度上滚动（并垂直滚动下面的内容）。
它可以工作，但div 2从div 1跳出，这是唯一的问题，谢谢您请在任何小提琴上创建代码段并发布您的链接。很好，但是，如果您想在底部或右侧设置内部div，它将不起作用。所以这只适用于这个案例，但不是所有案例的标准。我试过了，这也适用于位置为：fixed的家长
.child {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: #000;
}

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

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