哇塞！网页布局也Neng这么优良玩？——relative属性巨大揭秘！

巨大家优良呀！我是你们的细小助手， 今天我们要来聊聊网页布局的细小暗地，就是那东西听起来有点困难懂，但其实吧超级优良用的CSS属性——relative！你晓得吗，有了它，我们的网页布局就Neng变得又迅速又优良哦！

啥是relative属性呢？

哦，这玩意儿嘛，其实hen轻巧松。relative属性就像是一个细小指南针， 它告诉网页上的元素：“嘿，我要站在你旁边，或者在我原来的位置上稍微动一动。” 它就像是说：“我相对你我要这样定位。”

/* CSS */

.parent {
  position: relative;
}
.child {
  position: relative;
  left: 20px;
  top: 20px;
}

你kan， 我们在父元素上用了position: relative；然后在子元素上设置了left和top，这样子元素就会在父元素的旁边啦！是不是hen轻巧松呢？

relative和absolute，哪个geng厉害呢？

哎呀，这玩意儿问题问得优良！其实它们两个各有各的本事。relative就像是一个细小宝宝， 它只会相对地站在你旁边；而absolute就像一个巨大哥哥，它Neng离开原来的位置，去随便哪个一个你想去的地方。

用专业点的话说 relative是相对于其Zui近的Yi定位祖先元素进行定位的，而absolute则是相对于初始包含块进行定位，这玩意儿包含块通常是Zui近的positioned祖先元素。

而且，用absolute的元素会脱离文档流，其他元素的位置就不会受到它的关系到了。而relative则不会，它还会留在原来的位置上。

用relativeZuo个导航条吧！

优良的，那我们就来Zuo个轻巧松的导航条kankan吧！我们给导航条的容器加上position: relative；然后让个个导航项dou基于这玩意儿容器进行定位， 就像它们是一家人一样，站在一起。

.nav {
  position: relative;
}
.nav-item {
  position: absolute;
  top: 0;
  left: 0;
}
.nav-item-1 {
  left: 100px;
}
.nav-item-2 {
  left: 200px;
}

HTML有些：

是不是hen酷呢？我们就像是在玩拼图游戏一样，把个个导航项放到了正确的位置上。

图片悬浮效果，你也Neng！

接下来我们还要来Zuo一个图片悬浮效果！这玩意儿效果听起来有点高大级，但其实只要用上relative属性，你也Neng轻巧松Zuo到哦！

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease;
}
.image:hover {
  transform: scale;
}