沿 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

把css像这样

.main-div
{
 position:relative;
}
.along-edge
{
 position:absolute;
 right:50px;
 top:-20px;
 z-index:1;
}

勾选这个fiddle

Answer 2

按照以下方法即可。使主要 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>

希望对您有所帮助。

Answer 3

<div id="Main">
    <div id="Edge"></div>
</div>

和css

#Main{
    width:200px;
    height:200px;
    border:solid 1px black;
    position:relative;
    margin-top:50px;
}
#Edge{
    width:50px;
    height:50px;
    border:solid 1px black;
    position:absolute;
    top:-25px;
    right: 50px;
}

demo

Answer 4

将较小的 div 嵌套在主 div 中。

.along-edge {
position: absolute;
margin-top: -10px;
z-index: 1;
}

沿 div 的边界放置一个 div

Place a div along border edge of div

html

css

css-position