Html CSS位置，div内div特定位置

我正在为我的应用程序做一个设计，我想要放置通知，请查看我的和带有描述的图片，我想要放置

div

内部

div

但有特定位置，我尝试了绝对、相对，但没有成功

12

将父div设置为相对，子div设置为绝对

.parent {
    position: relative;
}

.child {
    position: absolute;
}

<div class="parent">
    <div class="child"></div>
</div>

.parent{
位置：相对位置；
}
.孩子{
位置：绝对位置；
}

无论您给.child的顶部和左侧值是什么，现在都将与.parent相对。

给您：

.kocka {
    width: 60px;
    height: 50px;
    background-color: orange;
    text-align: center;
    line-height: 50px;
    position: relative;
}
.circle {
    width: 30px;
    height: 30px;
    font-size: 10pt;
    font-family: Arial;
    color: white;
    line-height: 30px;
    text-align: center;
    background-color: red;
    position: absolute;
    right: -8px;
    top: -8px;
}

这里是

所以，有几种方法可以做到这一点。它们都需要对定位有一定的了解。首先，注意div是

位置：static默认情况下。默认情况下，窗口本身是相对的。当你这么说的时候，这是很棘手的，但是定位在
绝对位置的东西实际上是绝对位置的，相对于它们最近的
位置：相对的
父对象。因此，如果你想根据橙色物体边界放置红色物体，你需要使橙色物体相对，这样红色物体就知道它是一组新的边界（而不是窗口）。然后你可以使用绝对定位

第二个示例仅使用相对定位，这改变了它在流程中思考自身的方式。当你使某个东西相对时，它现在是根据它在流中的位置来定位的，所以你可以将它四处移动，但它仍然会保持原来的位置。。。所以在这个例子中，红色的物体漂浮在橙色物体的左上角作为起点。。。然后快跑一点。但是现在回想起来，因为我去掉了你的字体和css——这可能不适合你，但我想用另一种方式来演示它。我没有看到人们经常使用它，但它非常方便。想想每个经典的3层价格表，中间的“最好的交易”和更高一点的……p>
我知道这可以更好地解释。当你把某个事物与之相对时，它就变成了它内部事物的边界。当您将事物设置为绝对时，这意味着它们被定位到最近的相对物的边界

HTML

我还为自己做了一件事来保存：
你想再进一步吗？对于那些对原因感到好奇的人：@HashemQolami-那篇帖子跟什么有关系？这是一个小小的徽标，与窗口高度和html的怪癖无关，也与身体的混乱无关这当然是一个没有给出正式答案的大量讨论。“这是怎么回事？”治安官德里克说，这个问题本身并不重要。我贴了一个链接到我的一条评论，解释了为什么要对家长使用相对定位，以便正确定位绝对定位的孩子。就这样！
.kocka {
    width: 60px;
    height: 50px;
    background-color: orange;
    text-align: center;
    line-height: 50px;
    position: relative;
}
.circle {
    width: 30px;
    height: 30px;
    font-size: 10pt;
    font-family: Arial;
    color: white;
    line-height: 30px;
    text-align: center;
    background-color: red;
    position: absolute;
    right: -8px;
    top: -8px;
}

<div class="logo logo1">
    <div class="alert alert1"></div>
</div>

<div class="logo logo2">
    <div class="alert alert2"></div>
</div>

.logo { /* set up size etc */
    width: 60px; 
    height: 50px; 
    background-color: orange;
}

.alert { /* set up size etc */
    width: 30px; 
    height: 30px;  
    background-color: red;
}


/* absolute way */
.logo1 {
    position: relative;
}

.alert1 {
    position: absolute;
    top: -8px;
    right: -8px;
}


/* relative way */
.logo2 {
    /* nothing needed in this case*/
}

.alert2 {
    float: right;
    position: relative;
    top: -8px;
    right: -8px;
}