Xxx，这里咋回事啊，为啥我整了半天也没搞出来，快来教教我。就搞出这图这样的，要求不能通过具体的像素定位。
这不就是个定位吗？应该没啥大问题吧，你哪不会啊？
就老师讲的那个子绝父相啊，不是要给子元素相对于父元素定位吗，然我就把红的设为相对定位啊，但是绿色设为绝对定位就可以让它相对红色定位了啊，但是调蓝色的时候绿色已经设置为绝对定位了，我就不能再把它设置为相对定位了，那我咋整啊！
不能再把绿色设为相对定位就别设呗，直接摆烂，嘻嘻~
我靠，你咋回事啊，会不会啊你在这扯
你试试再说，不行你今天晚上把我赶出寝室
好，我试试。呀，行了行了。快快快，告诉我咋回事呀这。
唉你不该记这么死的，我们学习应该多了解一点相关的重要细节才能灵活的运用，只记一个子绝父相肯定不行呀。我来给你好好讲讲吧：
子绝父相只是因为经常会这么用所以才有人把它总结为这几个字的，但并不是只能这样用，就算是：子绝父绝，子绝父固定都是可以的，absolute 的 left、right、top、bottom 这几个定位的属性参照对象是最邻近的定位祖先元素，所以只要我们要相对与哪个祖先来定位只要将祖先设置为定位元素就行，至于是哪种就得看你的实际需求了，当希望子元素相对于父元素进行定位，又不希望父元素脱标的时候，我们才会会用到子绝父相。
噢，原来如此，我悟了。扶我起来，我还能肝！
啥，你悟了？那我再问你几个问题，看你会不会。你知道啥事时候用相对定位 relative 吗？
哈，就这么简单的问题你也太看不起我了吧。我们一般会在要对某些元素进行微调的时候使用 relative，就比一些网站中的小图标，有时候在标准流下放好时位置如果感觉还差那么点，需要微微的调整会更好看，那就用relative。
居然能答上来，看来没完全白学呀。
还有！还有！我还没说完呢。position: relative; 是不会脱离标准流的，设置后再定位的话还会占用空间，并且占用的是原来位置的空间。
哟，挺不错的嘛，那我就来点难一点的吧。说说将 position 设置为absolute/fixed 后元素会有啥变化吧。
脱离标准流呗……
还有呢？
额，这个嘛……
没事，我来告诉你：
1. 元素不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)，若元素未设置宽度高度，那么元素的宽高将完全由内容决定，看个例子就明白了：
未设置前：
2. 不再给父元素汇报自身宽高，若父元素没有设置宽高，将不能撑起父元素，举个例子：
设置前：
设置后：
3. 即使原来是行内级元素也可以随意设置宽度高度，直接看例子加深理解
啊啊啊，这么多啊，卧槽卧槽，不过没关系，对我这菜鸟来说简直全是干货啊。还有吗还有吗，快给我继续叨叨……
那我再问你最后一个，对于绝对定位的元素，我们怎么让它在父元素里水平居中呢？
在父元素里居中，嗯……我想想，给它设置 text-align: center; 吗？
不行哦，还有一点你不对的地方就是，text-align: center; 是给父元素设置的，使得父元素设置之后，它里面的行内级元素居中
奥，这样啊，那是 margin: 0 auto; ？
哈哈哈，还是不行，要是真这么简单我还问你？让我告诉你，首先我们需要知道：
对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
我们原来设置 margin: 0 auto; 时是让 margin-left = margin-right，从而使得元素两边空的位置相等而达到居中效果，那我们这里的区别是什么呢？只是多了个 left 和 right 而已，那么我们把他们全设置为0的话是不是就能达到我们想要的效果呢？没错，就是这样的。接下来让我们看代码：
哈哈，我又悟了，这就去试一试，冲呀！
写在最后：
这是第一次这么写文章，之前就见过类似这样对话式构建一个场景来讲知识的，感觉这样的文章有点循循善诱能更让人想读下去效果。所以自己也来试一下把自己学的东西分享一下，结果一写就接近三小时（毕竟自导自演也不容易啊），讲的知识可能对于大佬来说相对简单，但对于新手或者CSS基础学的不是太好的朋友肯定都是有用的，所以希望如果大佬不喜欢的话轻喷
