如何用position：absolute;创建CSS3图表 在具有display：inline-block;的框内工作；

Question

请，没有JavaScript。

可以想象一下。 包含数百个框的页面，每个框包含一个笑话，引用，图像...（所有带有display：inline-block;的框）。

现在，我试图放置一个带有一些带有position：absolute;组件的图表。 左：在display：inline-block之一中； 盒没有运气。 该图表显示在页面的左侧，并在其下方提供了一个下一个笑话框。

我该如何控制？

欢呼，全部。

第2部分（我的方框代码）：

.boxDarth{
    border-radius:5px;
    border:1px solid #663810;
    box-shadow:-3px 5px 4px #000000;
    margin:6px 3px;
    padding:6px;
    display:inline-block;

    line-height:1.5;
    text-align:left;
    text-decoration:none;
    font-weight:lighter;
    letter-spacing:1.4;
    text-shadow:-1px 1px 1px #37363b;
    word-wrap:break-word;

    vertical-align:top;
    position:relative;
}

图表ccs很长。 如果我在这里提供的内容还不够，并且因为我从没有在这里问过问题， 我应该在这里粘贴吗？ 上传一个文件？

.pie{
    position:absolute;
    width:100px;
    height:200px;
    overflow:hidden;
    left:150px;
    -moz-transform-origin:left center;
    -o-transform-origin:left center;
    -webkit-transform-origin:left center;
    transform-origin:left center;
}

Answer 1

图表必须是内联阻止框的子级，并且该框必须具有以下position: relative; 在上面。

 .inline-box { display: inline-block; background: violet; width: 300px; height: 300px; position: relative; } .chart { position: absolute; left: 0; top: 0; width: 150px; height: 150px; background: cornsilk; } 

 <div class="inline-box"> <div class="chart"> hi, I'm an absolutely positioned chart inside of a relatively positioned inline box </div> </div> 

Answer 2

容器应具有position: relative作为CSS属性