Question

我正在为我的应用程序制作一个设计，我想要发出通知，请看我的jsfiddle和图片说明，我想把div放在div里面但具体位置，我是绝对的，相对的，但没有成功。

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

Answer 1

使父div相对，子div为绝对。

.parent {
    position: relative;
}

.child {
    position: absolute;
}

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

无论您给予的顶部和左侧值是什么。儿童现在将相对于.parent。

Answer 2

这是a fiddle

所以，有几种方法可以做到这一点。他们都需要对定位有所了解。首先，请注意默认情况下div为position:static;。窗口本身是relative是默认的。当你这么说时很棘手，但定位absolute的东西确实绝对放在相对于他们最近的position:relative父母的位置。因此，如果你想根据橙色物体边界放置红色物体，你需要使橙色物体相对，以便红色物体知道它的新边界（不是窗口）。然后你可以使用绝对定位。

第二个例子，仅使用相对定位，这改变了它在流程中对自身的看法。当你创造一些相对的东西时，它现在根据它在流程中的位置定位，所以你可以在它周围进行滑行，但它仍然会保留它的原始位置......所以对于这个例如，你得到橙色物体左上角漂浮的红色物体作为起点......然后稍微踩一下。但回想起来，因为我剥离了你的字体和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/

Answer 3

你走了：

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

http://jsfiddle.net/NicoO/35nVw/1/

CSS位置，div里面的div特定位置

3 个答案:

HTML

CSS