如果你用CSS画过冰激凌圣代，那么你一定已经理解了CSS中定位的概念。
每一个学习过CSS的人，都经历过这样一个阶段：对CSS的定位概念一头雾水。在不断的实践和出错之后，才突然搞懂了各种定位方式。
这篇文章的目的，就是要让你搞懂CSS定位。
我们将会讲到下面这些定位属性：
我们要做的这个冰激凌圣代，由四个主要部分所组成：
如果要用HTML代码来描述这个冰激凌圣代，它应该是这个样子的：
<body>
<div class='fullSundae'>
<div class='cherry'></div>
<div class='whippedCream'></div>
<div class='iceCreamScoop'></div>
<div class='iceCreamScoop'></div>
<div class='glass'>
<div class='iceCreamScoop'></div>
<div class='iceCreamScoop'></div>
<div class='iceCreamScoop'></div>
</div>
</div>
</body>用图片形式来看是这样的：
在讲解CSS之前，我们先要观察一下：
如上一张图片所示，这个冰激凌圣代最多只能有5个冰激凌球。假设这5个球的总高度为500px，每个球两两相接。也就说，我们的fullSundae div总高度也是500px。这就是CSS默认的定位方式，静态定位。我们用它来说明，这个高度与任何container div都没有关联。
很好理解，我们要给每一个冰激凌球的高度设置为100px，5个冰激凌球一共500px，与fullSundae div的高度一致。而默认情况下，glass div的高度为300px。
现在，glass div的高度应该要容纳3个冰激凌球，也就是说glass div的高度是fullSundae div高度的60%。我们现在就来讲解相对定位方式。你可以让glass div使用相对定位，把高度值设定为60%，这样杯子的高度就被指定为fullSundae div高度的60%。
至于杯子里的那三个冰激凌球，如果你用相对定位的方式来定义它们，它们会根据glass div的高度来自动计算自己的高度。鉴于被子里有3个冰激凌球，因此每一个球的高度应该是杯子高度的33.3%。我们现在来看代码：
.fullSundae{
height:500px;
position:static;
}
.fullSundae > .iceCreamScoop{
height:100px;
}
.glass{
position:relative;
height:60%;
}
.glass .iceCreamScoop{
height: 33.3%;
position:relative;
}固定定位是四中定位方式中最简单的一个。一个固定定位的元素会始终待在一个地方，不管其他元素是否会出现变化。换句话说，生奶油会一直待在最上面的冰激凌球的顶部，无论你是要添加还是减少冰激凌球的数量，生奶油的位置都不会变。它是相对整个body实现定位的，而不是包含它的div。
冰激凌球的变化不会对生奶油的位置产生影响。
固定定位经常出现在网页的header和footer中，因为里面的元素位置基本不需要变化。
我把绝对定位放在最后讲解，是有原因的：如果绝对定位使用的太频繁，它会导致代码很难维护。你一定要小心。但是在这个例子中，它非常适合用来定义樱桃的位置。
在这个冰激凌圣代中，你可以在任何位置放置樱桃，甚至可以放在杯口的边缘。绝对定位与静态定位、相对定位使用的规则不同。移除使用这种定位方式的元素，也不会对其他元素有任何影响。
在使用绝对定位时，你必须要明确指定元素的位置，否则它在默认情况下会出现在body的左上角。或者，如果母元素使用了相对定位，它会出现在该div的左上角。
观察上图中的冰激凌圣代，多个地方都添加了樱桃，它们不会干扰其他元素。
最后提醒一次：绝对定位元素的位置，取决于最近的使用了相对定位的母元素。如果没有使用了相对定位的母元素，其位置是由整个body所决定的。在我们的例子中，杯子中樱桃的位置，取决于glass div的高度，而不是fullSundae div的高度。
现在去练习吧，当你掌握了4中定位方式之后……给自己买个冰激凌吃吧。
声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com
分享
如果你用CSS画过冰激凌圣代，那么你一定已经理解了CSS中定位的概念。
每一个学习过CSS的人，都经历过这样一个阶段：对CSS的定位概念一头雾水。在不断的实践和出错之后，才突然搞懂了各种定位方式。
这篇文章的目的，就是要让你搞懂CSS定位。
我们将会讲到下面这些定位属性：
我们要做的这个冰激凌圣代，由四个主要部分所组成：
如果要用HTML代码来描述这个冰激凌圣代，它应该是这个样子的：
<body>
<div class='fullSundae'>
<div class='cherry'></div>
<div class='whippedCream'></div>
<div class='iceCreamScoop'></div>
<div class='iceCreamScoop'></div>
<div class='glass'>
<div class='iceCreamScoop'></div>
<div class='iceCreamScoop'></div>
<div class='iceCreamScoop'></div>
</div>
</div>
</body>用图片形式来看是这样的：
在讲解CSS之前，我们先要观察一下：
如上一张图片所示，这个冰激凌圣代最多只能有5个冰激凌球。假设这5个球的总高度为500px，每个球两两相接。也就说，我们的fullSundae div总高度也是500px。这就是CSS默认的定位方式，静态定位。我们用它来说明，这个高度与任何container div都没有关联。
很好理解，我们要给每一个冰激凌球的高度设置为100px，5个冰激凌球一共500px，与fullSundae div的高度一致。而默认情况下，glass div的高度为300px。
现在，glass div的高度应该要容纳3个冰激凌球，也就是说glass div的高度是fullSundae div高度的60%。我们现在就来讲解相对定位方式。你可以让glass div使用相对定位，把高度值设定为60%，这样杯子的高度就被指定为fullSundae div高度的60%。
至于杯子里的那三个冰激凌球，如果你用相对定位的方式来定义它们，它们会根据glass div的高度来自动计算自己的高度。鉴于被子里有3个冰激凌球，因此每一个球的高度应该是杯子高度的33.3%。我们现在来看代码：
.fullSundae{
height:500px;
position:static;
}
.fullSundae > .iceCreamScoop{
height:100px;
}
.glass{
position:relative;
height:60%;
}
.glass .iceCreamScoop{
height: 33.3%;
position:relative;
}固定定位是四中定位方式中最简单的一个。一个固定定位的元素会始终待在一个地方，不管其他元素是否会出现变化。换句话说，生奶油会一直待在最上面的冰激凌球的顶部，无论你是要添加还是减少冰激凌球的数量，生奶油的位置都不会变。它是相对整个body实现定位的，而不是包含它的div。
冰激凌球的变化不会对生奶油的位置产生影响。
固定定位经常出现在网页的header和footer中，因为里面的元素位置基本不需要变化。
我把绝对定位放在最后讲解，是有原因的：如果绝对定位使用的太频繁，它会导致代码很难维护。你一定要小心。但是在这个例子中，它非常适合用来定义樱桃的位置。
在这个冰激凌圣代中，你可以在任何位置放置樱桃，甚至可以放在杯口的边缘。绝对定位与静态定位、相对定位使用的规则不同。移除使用这种定位方式的元素，也不会对其他元素有任何影响。
在使用绝对定位时，你必须要明确指定元素的位置，否则它在默认情况下会出现在body的左上角。或者，如果母元素使用了相对定位，它会出现在该div的左上角。
观察上图中的冰激凌圣代，多个地方都添加了樱桃，它们不会干扰其他元素。
最后提醒一次：绝对定位元素的位置，取决于最近的使用了相对定位的母元素。如果没有使用了相对定位的母元素，其位置是由整个body所决定的。在我们的例子中，杯子中樱桃的位置，取决于glass div的高度，而不是fullSundae div的高度。
现在去练习吧，当你掌握了4中定位方式之后……给自己买个冰激凌吃吧。
声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com
苏公网安备 32059002001776号
