沿div的边缘放置一个div

Question

在我的网络应用程序中，我想在另一个div的边界边缘放置一个小div，如下所示：

这是我的代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

怎么做？

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设为主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;
}