刚才发现之前的 position 白学了

[pinews]

之前
absolute 以 body 作为起点，然后用 top left 定位
relative 把自身作为起点，然后用 top left 定位。
当然我知道不止如此，但用的时候主要是这么用的。
但今天看别人的下拉菜单时，完全颠覆了我认知，absolute 不用 topleftrightbottom （指 auto 而非 0 ）的时候，竟然和 relative 很像还很好用。
原因我网上搜了，还没看明白怎么回事

[83f420984]

absolute 的元素的位置相对于最近的已定位祖先元素进行定位的，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

[shenyu1996]

还有全部 Zhi

[shenyu1996]

手滑发出去了 还有全部置 0 撑满页面这种骚操作

[pinews]

@shenyu1996 是啊

@83f420984 什么是包含块？

[qdxr]

@pinews 看下 mdn 上关于 position 和 containing box 的内容估计还会被惊讶一下。我有次调嵌套模态框样式的时候，也重新认识了一下 position

[birdrally]

你不发例子，在这干说

[hoythan]

张鑫旭有对 这个参数的详细视频介绍，你看完世界观会变得。

[rabbbit]

position 中造成奇怪现象的常见原因:
1 如果同时拥有 top:0 bottom:0 和 height 和 margin: auto, 子元素会飞到中间去自动垂直居中.原因是上下两边自动被 margin-top 和 margin-bottom 补上了.这也是一种居中方法.
2 如果 fixed 元素的祖先元素有 transform 属性, fixed 元素会相对于这个祖先元素定位,而不是视口.
3 拥有 absolute/fixed 的元素会生成 BFC,可以理解成个盒子,内外互不影响.常见的影响有里面的 margin 不会穿透了, float 元素把容器撑了起来.
4 如果子元素是 absolute 元素, 且宽度值为百分比. 这个百分比值相对于父元素 padding + width 计算.
5 position 会改变层叠上下文, 如果两个元素压在一起的话会改变顺序.

[rabbbit]

至于为什么 auto 的时候位置没变, MDN 说的很清楚, 没有的时候就不动这个元素
```
对于绝对定位元素，元素将忽略此属性已 bottom 属性为准，如果此时设置 height: auto，将基于内容需要的高度设置高度；如果 bottom 也为 auto 的话，元素的垂直位置就是它假如作为静态(即 static)元素时该在的位置。
```

https://developer.mozilla.org/zh-CN/docs/Web/CSS/top

[rabbbit]

4 如果子元素是 absolute 元素, 且宽度值为百分比. 这个百分比值相对于父元素 padding + width 计算.
-->
4 如果子元素是 absolute 元素, 且宽度值为百分比. 这个百分比值相对于包含块的 padding + width 计算.

[hackyuan]

作为过来人，友情提示不要折腾 CSS，能用就行，你专心学三四个月 JavaScript 可以和面试官吹牛逼了，三四个月 CSS 你还是一脸懵逼。

[pinews]

@rabbbit 是的之前那个例子你发的文章我看了对此说的很清楚，如果不设值，则原地不动。
@birdrally 例子你随便找一个 css 框架在处理下拉列表的时候，这么处理的不少。

[rabbbit]

如果想深入了解具体的计算过程, 可以看这两个:
https://www.w3.org/html/ig/zh/wiki/CSS2/visudet/zh-hans#abs-non-replaced-width
https://www.w3.org/html/ig/zh/wiki/CSS2/visudet/zh-hans#abs-non-replaced-height

[lqzhgood]

CSS 就是一个 奇淫技巧 支撑的 “语言”。

[falcon05]

css 就是依靠经验和积累

[mostkia]

你使用 position：absolute，如果不对父元素也做定位，那它有可能会跑到外太空去（其实就是跑到更上一级去寻找定有 postiton 定位的容器了）。css 其实难就难在太过松散，没什么规律，很多规则又互相影响，不踩一些坑没法写好的。

[azh7138m]

@lqzhgood 对用户来说，大部分时候依赖经验，但是标准是非常详细的，绝大部分时候其表现都是符合标准的。

@hackyuan 3、4 个月看 CS 基础了，没 CS 基础基本就是被摩擦的命运。

[pinews]

@azh7138m 标准是一般好的，但有时也是垃圾，明明 IE 先出的，firefox 非要换个名字，说自己是标准

@lqzhgood web 是开放的，对后来者友好，新来者努力开拓却无法转化成利益，就不想开发了，所以今天你做主，明天我当家，随缘。

[wtf12138]

absolute 什么时候相对于 body 了 你确定你学过 css 吗

[yhyh]

额。absolute 是相对父元素（带有 relative 的元素） 绝对定位， 你认为是 body 是 body 最外层的元素