前言：
此刻大家对“cssleft失效”大概比较注意，朋友们都想要分析一些“cssleft失效”的相关文章。那么小编也在网络上网罗了一些对于“cssleft失效””的相关资讯，希望同学们能喜欢，看官们一起来了解一下吧！在 html 页面的css样式中，如果将 position 属性的值设置为 fixed，那就表示其元素的位置相当于显示设备的可视区域进行定位，而今天在调试此属性时，却发生了一件奇怪的事件。
position:fixed 定位失效情况复现
失效代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> body{ height: 150%; width: 100%; transform: translate(0, 0); } div{ position: fixed; left: 50%; top: 50%; width: 100px; height: 200px; margin: -100px 0 0 -50px; background-color: brown; }</style><body> <div></div></body></html>代码动行结果：
注意：
1、代码的样式是规定DIV元素模块，在浏览器的可视窗口中，上下左右居中
2、实际的显示效果，DIV模块已经向上偏移
position:fixed 定位问题解决方法
通过排查代码，可以发现，在 body 样式属性中，有个 transform: translate(0, 0) 属性，去掉此属性后，position:fixed 定位问题解决
修复后的代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> body{ height: 150%; width: 100%; } div{ position: fixed; left: 50%; top: 50%; width: 100px; height: 200px; margin: -100px 0 0 -50px; background-color: brown; }</style><body> <div></div></body></html>代码运行结果：
position:fixed 定位出错的原因
关于此问题的出现，牵涉到了 Stacking Context(堆叠上下文的概念)。
堆叠上下文，是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
1、任何非 none 的 transform 值都会导致一个堆叠上下文（Stacking Context）和包含块（Containing Block）的创建。
2、由于堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 可视窗口定位，而是基于这个父元素。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #cssleft失效
