广场沿格

Question

在我的web应用程序的边框边缘一个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

下面的方式，你可以做到这一点。将主分区position:relative和边缘分区position:absolute设置为主分区。并将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 2

将CSS放在这样

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

入住这fiddle

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内的小格。

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