Open yangsirgo opened 4 years ago
一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？ 很多人都认为是在浏览器窗口左上方。实际上，还是当前位置，不是在浏览器左上方。正是这种错误认知导致凡是使用absolute 绝对定位的地方，一定父容器 position:relative，同时 left/top 等属性定位，甚至必同时使用 z-index 属性设置层级。这是非常错误的，absolute 是非常独立的 CSS 属性值， 其样式和行为表现不依赖其他任何 CSS 属性就可以完成。 “无依赖绝对定位”本质上就是“相对定位”，仅仅是不占据 CSS 流的尺寸空间而已。 重点在 ‘相对自身位置定位’ ！！！ ‘不占空间’！！！ 父元素设置 overflow：hidden 也不会隐藏 此元素，因为不占空间！！！ 三个用处： 1.form 表单的 错误提示 2.form 表单前面的 * 必填项。 3.自动完成的下拉框，菜单的下拉框。 4.自然定位到左上角的top 火 hot 之类的图片。
一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？ 很多人都认为是在浏览器窗口左上方。实际上，还是当前位置，不是在浏览器左上方。正是这种错误认知导致凡是使用absolute 绝对定位的地方，一定父容器 position:relative，同时 left/top 等属性定位，甚至必同时使用 z-index 属性设置层级。这是非常错误的，absolute 是非常独立的 CSS 属性值， 其样式和行为表现不依赖其他任何 CSS 属性就可以完成。 “无依赖绝对定位”本质上就是“相对定位”，仅仅是不占据 CSS 流的尺寸空间而已。 重点在 ‘相对自身位置定位’ ！！！ ‘不占空间’！！！ 父元素设置 overflow：hidden 也不会隐藏 此元素，因为不占空间！！！ 三个用处： 1.form 表单的 错误提示 2.form 表单前面的 * 必填项。 3.自动完成的下拉框，菜单的下拉框。 4.自然定位到左上角的top 火 hot 之类的图片。