子容器的父容器

Question

的底部的CSS顶部对齐考虑这个HTML

<div class="parent"> 
    <a href="#">Parent</a> 
    <div class="child"> 
     <a href="#">Child</a> 
    </div> 
</div> 

我想要做的就是位置child顶部的parent底部。

这里是我的CSS迄今：

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

什么，这达到是这样的：

我想实现的是：

恳求se注意：我不知道父容器或子容器的高度，并不真正想设置任意高度，我不想恢复使用JavaScript。

Answer 1

.parent { 
    position: relative; 
    background-color: #F00; 
} 

.child { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background-color: #00F; 
} 

Answer 2

您可以transform: translateY(100%)

的平移Y（） CSS功能上飞机垂直移动的元素做到这一点。这个转换的特点是定义了垂直移动的多少。
translateY(ty)是快捷方式对于translate(0, ty)。

.parent { 
 
    position: relative; 
 
    background: red; 
 
    width: 50%; 
 
    height: 50vh; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    transform: translateY(100%); 
 
}

<div class="parent"> 
 
    <a href="#">Parent</a> 
 
    <div class="child"> 
 
     <a href="#">Child</a> 
 
    </div> 
 
</div>