html - 将 div 放在 和 之上，但不要移动它们的位置

Question

我正在尝试放置一个圆形 div (border-radius:85)在 <li><a></a></li> 之上做这样的事情:

现在只在一个盒子上制作它有点工作，尽管当我有 30 个或更多盒子彼此相邻放置时，它会迫使它们改变位置并且不能正确对齐。

jsFiddle: http://jsfiddle.net/ZtbTU/

如果您删除圆形 div，您会注意到这些框已正确对齐。

如何在不影响框位置的情况下将圆形 div 放置在所有框上？

Answer 1

查看 this fiddle .

我在圆形 div 中添加了 position: absolute。然后我删除了 overflow: hidden 并添加了一些 top 和 left 定义来定位 div。

html

<ul>
   <li id="item-1">
      <a href="#" ></a><div class="kshort">1</div>
   </li>
   <li id="item-2">
      <a href="#" ></a>
   </li>
</ul>

CSS

ul li{
    float:left;
    margin:12px;
    position:relative}

ul li a{
    background:#ccc;
    background-repeat:no-repeat;
    display:block;
    height:48px;
    width:48px}

div {
    width:15px;
    height:15px;
    border:1px solid #333;
    background:#333;
    color:white;
    border-radius:10px;
    position:absolute;
    line-height:14px;
    text-align:center;
    overflow:hidden;
    top: 35px;
    left: 40px;
}