html - 沿 div 的边框边缘放置一个 div

Question

在我的网络应用程序中，我想像这样在另一个 div 的边框边缘放置一个小 div:

这是我的代码:

<div style="border:1px solid black; height:1em; width:10em;">
<div style="border:1px solid black; display:inline-block; height:10em; 
width:10em;"> Along edge </div>
 </div>

如何实现？

Answer 1

您可以按照以下方式进行操作。使主 div position:relative 和边缘 div position:absolute 到主 div。并将 top 和 right 给子 div。

.main{
    border:2px solid;
    position:relative;
    width:400px;
    height:150px;
    top:50px;
}
.sub{
    border:1px solid;
    position:absolute;
    right:10px;
    top:-10px;
    z-index:99;
    background-color: #fff;
}

<div class="main">
    Main Div
    <div class="sub">
        along edge
    </div>
</div>

希望对您有所帮助。