html - CSS位置，div里面div具体位置

Question

我正在为我的应用程序做一个设计，我想发出通知，请参阅我的 jsfiddle和带有描述的图片，我想把 div 放在 div 里面但是有特定的位置，我尝试了绝对，相对但没有成功。

http://postimg.org/image/wrpw3qhvd/

<div class="kocka">
    <span class="fontawesome-save"></span>
    <div class="circle">12</div>
</div>

Answer 1

这里是 a fiddle

因此，有几种方法可以做到这一点。它们都需要对定位有一定的了解。首先，请注意 div 默认为 position:static;。默认情况下，窗口本身是 relative 。说起来有点棘手，但是位于 absolute 位置的东西实际上是绝对放置的，相对于它们最近的 position:relative 父级。所以，如果你想放置红色的东西，基于橙色的东西边界，你需要让橙色的东西相对，这样红色的东西知道它是新的边界集(不是窗口)。然后就可以使用绝对定位了。

第二个示例，仅使用相对定位，这改变了它在流程中思考自身的方式。当你做一些相对的事情时，它现在根据它在流中的位置定位，所以你可以快速移动它，但它仍然会保持它原来的位置......所以对于这个例子，你会得到漂浮在左上角的红色东西以橙色物体的一 Angular 为起点……然后将其快速移动一点。但回想起来，因为我剥离了你的字体和 css - 这可能对你不起作用，但我想用另一种方式来展示它。我没有看到人们经常使用它，但它非常方便。想一想每个人都制作的经典 3 层价格表，中间是“最划算的”，再往上一点……

我知道可以更好地解释。当你使某物变得相对时，它就变成了它内部事物的边界。当您使事物绝对化时，这意味着它们位于最近亲戚的边界。

HTML

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

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

CSS

.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;
}

a fiddle with fonts

还有一个我为自己保存的:http://jsfiddle.net/sheriffderek/w337s/