CSS定位详解：用4种定位方式画一个冰激凌圣代

来源： SDK.cn 类型：技术文章发布：2016-09-01 09:45:17

如果你用CSS画过冰激凌圣代，那么你一定已经理解了CSS中定位的概念。

每一个学习过CSS的人，都经历过这样一个阶段：对CSS的定位概念一头雾水。在不断的实践和出错之后，才突然搞懂了各种定位方式。

这篇文章的目的，就是要让你搞懂CSS定位。

我们将会讲到下面这些定位属性：

绝对定位（Absolute）
静态定位（Static 默认）
固定定位（Fixed）
相对定位（Relative）

我们要做的这个冰激凌圣代，由四个主要部分所组成：

玻璃杯
冰激凌球
生奶油
樱桃

HTML形式的冰激凌圣代

如果要用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之前，我们先要观察一下：

1.冰激凌球的数量受到杯子高度的限制，不能无限制的往上加。
2.樱桃你想放在哪里都可以，多加几个也没问题。
3.无论有多少个冰激凌球，生奶油都要在最上面的球上。你见过有人把生奶油加在两个冰激凌球之间的吗？反正我没见过。

相对/静态定位：杯子和冰激凌球

如上一张图片所示，这个冰激凌圣代最多只能有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;

}