CSS我不懂-位置

本文转载自微信公众号《自然觉醒笔记本》，作者写文章《自然觉醒》。转载本文请联系自然觉醒的笔记本公众号。熟悉我的朋友可能知道，我最近回到长沙工作。由于我大部分时间都在研究工具，所以我做了很多Node.js开发。但是，现在又开始写一些业务代码，发现CSS有很多高深的东西，所以今天的文章就来回顾一下CSS定位相关的东西。定位的类型在最新的CSS规范中，定位元素分为四种：relative：相对定位元素absolute：绝对定位元素fixed：固定定位元素sticky：粘性定位元素如果元素没有设置position属性，则默认为static，其所有与定位相关的属性（top/bottom/left/right/z-index）都将无效。在不修改position属性的情况下，给它设置top、left等属性，你会发现它没有变化。相对定位相对定位是指元素在其原始位置上发生一定程度的偏移。具体偏移量取决于top/bottom/left/right这四个属性的值。我们给一个元素设置相对定位（position:relative;），然后让这个元素距离上左30px。是元素不带.releativ和.releative的区别。当一个元素被绝对定位时，它的初始位置将被保留，即原始位置将被留空。div{display:inline-block;width:200px;height:200px;}.box1{background:red;}.box2{background:yellow;}.box3{background:blue;}.relative{position:relative;top:30px;left:30px;}先定义元素的样式，当三个元素都没有偏移时，如下图：