首页 > 其他分享 >CSS的fixed定位失效

CSS的fixed定位失效

时间:2022-10-30 18:02:00浏览次数:45  
标签:祖先 元素 perspective 失效 屏幕 fixed CSS 属性


MDN中对于fixed定位的解释:元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。

元素的位置在屏幕滚动时不会改变。

打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。

当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。

所以,要想元素是根据屏幕窗口进行定位,该元素的祖先元素的样式属性不能包含有以下属性,否则会将视口改为该祖先元素!

  • ​transform​
  • ​perspective​
  • ​filter​

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



标签:祖先,元素,perspective,失效,屏幕,fixed,CSS,属性
From: https://blog.51cto.com/echohye/5807589

相关文章

  • 英语单词组件- 单词在句子中,上面显示中文下面显示音标 css样式
    原先效果:改进demo效果优化点音标长度超出,或者中文超出,总宽度会按照最长的走居中显示再次优化line-height:22px;加入这个对齐中间行(字号大小会让绝对上下高度,对不齐中间的......
  • 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏
    网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用。下面使用HTML+CSS+JS实现完整的Loadin......
  • 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏
    网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用。下面使用HTML+CSS+JS实现完整的Loa......
  • day03-CSS
    CSS1.css介绍css指的是层叠样式表(cascadingstylesheets)官方文档:https://www.w3school.com.cn/css/index.asp为什么需要css?在没有css之前,我们想要修改html元素的......
  • JS CSS HTML 加载顺序
    JSCSSHTML加载顺序 解析:运行代码加载:下载代码JS脚本(因为js修改DOM,所以需要先js解析)script标签:阻塞html文档的解析,直到脚本执行完外引js:先网络......
  • html,css,js加载顺序
    <headlang="en"><metacharset="utf-8"><title></title><linkrel="stylesheet"href="css/*.css"><scriptsrc="js/*.js></script></head>DOM文......
  • CSS权重的叠加
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width......
  • 「测试开发全栈-HTML」(12)css字体颜色属性
    CSSText(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。 用的最多的就是文本颜色,color属性用于定义文本的颜色。语法如下:div{ ......
  • CSS2学习随笔
    CSSCSS:层叠样式表(CascadingStyleSheets)修饰网页,且能配合js对原有样式进行更改。css的层叠性:一个元素可能同时被多个css选择器选中,每个选择器都有一些css规则,这......
  • CSS3学习随笔
    CSS3css3是css2的升级,相比新增主要内容css选择器,和css属性新增内容:语言模块,背景,列表,边框,文本,盒子特效,多列目录CSS3渐进增强和优雅降级(面试题)渐进增强优雅降级选择器属性......