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

Question

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS84clROQS5wbmcifQ==” alt =“在此处输入图像描述”>

嗨

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

到目前为止，我已经在div 2上尝试过，但是效果不佳

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

这没有将div对齐在顶部位置，什么可以使它在顶部对齐呢？

Answer 1

我将像前面所说的那样在子对象上使用position: absolute;来实现这一点，但是我没有使用DOM来向DOM添加额外的div来模拟使用该空间，而是使用了[[pseudo-element（更确切地说，[ C0]）。

这是我使用的结构：

::before pseudo-element

具有类
parent

的div必须为

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

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

，子级必须为绝对值，并设置为position: relative;，如以下行解释所示：top: 0;

尽管您需要将此元素设置为固定的高度和宽度，否则将无法使用。
这种方法的问题是，您的div将超过.child {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: #000;
}
 div的前100像素。
为了解决这个问题，我们需要在.parent div上创建一个伪元素，它将模拟该空间并使所有内容工作得更好：
.parent

这是一个带有示例代码的小提琴，希望对您有帮助！
.parent:before {
    display: block;
    content: ' ';
    width: 100%;
    height: 100px;
}
PS：仅当您知道
height

始终为100px时，此选项才有效。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

div2总是在顶部

Answer 5

按照Vipul的回答，出于相同的行为，我在jsfiddle上创建了代码片段：

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

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

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

}

Answer 6

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

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

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