13.定位属性

主要的布局方式有三种，标准，浮动，定位。使用定位，我们可以随意将元素放到指定位置

• 浮动与定位是不冲突的，我们可以两种结合使用

像百度的这个导航栏我们就可以使用定位布局

无论我如何滚动右侧的滚动条，导航栏的位置总是不变的

定位有两个部分构成，分别是定位模式与边偏移

我们先说定位模式，定位模式通过position属性设置，有五种不同的模式

• static 静态定位，这个是默认值，静态定位就是标准流
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘性定位

边偏移是在定位模式下的偏移量，有top,bottom,left与right四个属性，后面跟像素值或百分比，像素值可以为负值

• top 与父元素上边线的距离
• bottom 与父元素下边线的距离
• left 与父元素左边线的距离
• right 与父元素右边线的距离

我们只给一组值，比如左上，左下，右上，右下，这四组给一个，因为既给上值又给下值是没有意义的

如果最终还是给了相对的两个值，左右中会取左使用，上下中会取上使用

目录

1 静态定位 static

2  相对定位 relative

3  绝对定位 absolute

3.1  父对象为整体页面

3.2  父对象为定位元素

3.3  爷对象为定位元素

3.4  绝对定位元素水平垂直居中

3.4.1  水平居中

3.4.2  垂直居中

4  子绝父相

5  固定定位 fixed

5.1  固定定位在版心附近

6  粘性定位 sticky

7  小结

8  叠放次序 z-index

9  定位的特殊属性

9.1  行内元素设置绝对或固定定位，可以直接设置宽度与高度

9.2  块元素设置绝对或固定定位，不给宽度与高度，默认大小是内容的大小

9.3  定位模式下，上层的元素会压住下层元素的所有内容

---

1 静态定位 static

静态定位是标准流，所以后续设置的偏移量也是没有作用的

它的效果还是这样

2  相对定位 relative

相对对位是相对自身原来的距离进行移动，我们试一下

它原来的位置大致是在红框子的位置上，现在它是下面绿的那个盒子，他们的距离是设置的top值500px

我们也可以从上面看出，相对定位是保留元素原来的位置的

相对定位主要作用是限制绝对定位的，我们管这个作用叫子绝父相，我们说完绝对定位后再说这个事儿

3  绝对定位 absolute

绝对定位的移动是相对于已定位的(static不算已定位)父对象移动的，如果没有已定位的元素当作父对象，那它的父对象就是整体页面(body)

3.1  父对象为整体页面

我们现在没对他进行设置父元素，所以这里的500px是它的上边沿和页面的上边沿的距离

我们可以看到，使用了绝对定位，盒子原先的位置会被顶掉

3.2  父对象为定位元素

我们这里加了第三个盒子，给第二个盒子加了定位模式但并未移动

它的效果是这样的

偏移量150，本身50，正好卡到父对象的右边

我们现在给父对象的定位模式换成static，为了更严谨我们可以再给一个top

它就变成这样了，如果它以橘色盒子作为父对象，它应该正好卡在边缘，现在明显不在边缘。它现在是以页面作为父对象的

我们现在把static与top去掉

发现效果与刚刚一样

3.3  爷对象为定位元素

子元素的移动会以最近的已定位父对象做参考。

如果爷对象是定位元素，父对象不是，那它是以爷对象为参考。如果父对象与爷对象都是定位元素，那它是以父对象做参考。我们做个例子

现在它是这样的

现在我们给爷对象一个定位模式，然后绝对定位子对象，给子对象left 0px，如果它是以父对象做参考，它就会卡在父对象的左边，如果它以爷对象左参考，它就会卡在爷对象的左边

我们发现它贴在了爷对象的边上，所以是以爷对象为参考的

我们再看爷对象与父对象都为定位元素的情况

发现他是以父对象为参考的

3.4  绝对定位元素水平垂直居中

3.4.1  水平居中

在默认情况下绝对定位的元素使用margin:0 auto;是不会水平居中的

这里我们需要给他算一下，我们先让其走到父对象宽度的50%处，然后向左边走被设置盒子宽度的一半

这样它就能水平居中了

无论页面比例如何，它都可以水平居中

3.4.2  垂直居中

垂直居中与水平居中原理一样，先走到父对象高度的50%，之后再往回走自己一半的高度

这样就能垂直居中了，怎样改变页面比例，它都会垂直居中

4  子绝父相

子绝父相的意思是子元素用绝对定位，父元素用相对定位

如果使用嵌套的盒子，子绝父相是最常用的，绝对定位不会占用父元素的位置，所以可以任意摆，父元素本身是要在页面中卡一个位置的，所以我们要用相对定位

子绝父相只是最常用的，但并不是用别的不对，我们要视情况而定。这个口诀存在的意义是，子对象不知道给什么的时候就给绝对定位，父对象不知道给什么的时候就给相对定位，能解决大多数情况的问题

我们看百度百科上的一个例子

像这种轮播图，它使用的方式就是父元素为相对定位，子元素为绝对定位

我们下面做一个轮播图的样子出来

• 动态效果需要用JS做

我们将其搞成这个样子

首先我们给结构先搞出来

• 写的时候最好一个一个弄，我这是弄完了之后截的图

之后我们加入css

关于下面的点儿，我们一般是用js搞，js可以让这个点被点的时候改变为selected这个类，那样自然颜色就可以变过来了

5  固定定位 fixed

我们开头说的百度导航栏就可以使用定位来做

我们做个例子

• 给body设置大的高度，在没有多的内容的时候可以撑开页面

现在我无论怎么移动滚动条，div的位置依然在原地

我们现在给它两个偏移量

它的偏移量参考的可视窗口的四边

可视的意思是，无论窗口有多小，它总以可视的四个点定位

固定定位和父元素没有关系，你给它父元素它依然以可视区域为参考

固定定位不占有原来的位置，可以理解为它自己处于一个新的图层

5.1  固定定位在版心附近

大多数网页会有一个版心的存在，版心就是我下面青色的部分

我现在的代码是这样的

我们现在将一个盒子固定在版心周围

这样我们就遇到一个问题，当我们进行页面缩放的时候，盒子就不在我们想要的位置了

为了解决这个问题，我们要改一下固定定位的定位方法，我们观察一下，发现高度没有问题，有问题的是与左侧的距离

所以我们要改变左侧距离的算法，我们首先将盒子定位到中央(left:50%)，然后设置定位盒子的左外边距为版心宽度的一半

这样无论怎么调整浏览器，盒子总是能固定在版心附近

6  粘性定位 sticky

粘性定位相当于相对定位与固定定位的混合，它能达到这样一个效果，我们看京东官网的这里，当我们打开的时候，这个元素是这样的

当我们滚动到一定程度时，它会出现全貌

当我们继续滚动时，它依然跟着滚动条来走

我们从上面可以发现两个特点

• 元素以可视串口为参照移动（固定定位特点）
• 元素占有原来的位置（相对定位特点）

我们要以margin定义初始位置，然后使用top等位置值定义移动的位置

下面我们做个例子

• 这里我们至少要加top,left,right,bottom的其中一个，粘性定位才会生效

当我们打开后是这样的

当我们滚动一部分，它会逐渐露出全貌

当我们滚动到底，它会露出所有内容

由于我令其为青色盒子的子盒子，所以改变比例也不会影响它的位置

这种定位目前兼容性很差，能不用我们以后最好不用，像刚刚京东的那个右侧盒子，也不是通过粘性定位做的

7  小结

• 脱标的盒子是不会出现外边距塌陷问题的

8  叠放次序 z-index

我们可以使用z-index来决定定位的叠放次序

默认是auto，它可以使用正整数与负整数，数值越大就越靠上

我们做一个例子，默认情况下aboslute定位的盒子会在relative定位的盒子之上

我们现在对其设置 z-index

这样我们发现relative就再absolute之上了

auto在z-index中是最小的，我们任意设置一个值都在auto之上

只有设置定位后z-index才会生效

如果所有属性都相同，在最后写的元素会被放到最上面

9  定位的特殊属性

9.1  行内元素设置绝对或固定定位，可以直接设置宽度与高度

9.2  块元素设置绝对或固定定位，不给宽度与高度，默认大小是内容的大小

9.3  定位模式下，上层的元素会压住下层元素的所有内容

我们之前在浮动中说过

我们现在来看定位模式

发现文字也被压住了