我看到固定位置元素在相对定位的父级中的行为方式存在差异.根据我在网上找到的文档,FireFox和Chrome应该将元素固定到视口而不是父视图.但是,我发现如果我没有在固定元素上指定左/右值,它在静态和固定之间的某种混合行为,在某种意义上它是垂直固定到视口,但移动就好像它是父元素中的静态元素.我找不到围绕这些条件的任何官方/受尊敬的文件.它们基本上都表示如下内容:
固定定位
不要为元素留出空间.相反,将其放置在相对于屏幕视口的指定位置,并且在滚动时不要移动它.打印时,将其放置在每页的固定位置.
资源
另一方面,Safari似乎渲染它,因为它被描述为纯粹固定到视口的地方,无论我是否将父元素设置为相对而没有定义任何顶部/右侧/底部/左侧属性.如果你有机会通过点击从左边-100像素的青色div来尝试在Safari中试试.黄色条将固定在视口中:
http://jsfiddle.net/bbL8Lh4r/2/
那么哪个浏览器正确呈现这个?我的所有浏览器都已更新到最新版本.起初我认为Safari只是通过阅读文档才是正确的,但FireFox和Chrome都有着相同的不同视图,它们似乎是静态和固定之间的混合体.
HTML
CSS
body,
aside,
.container,
.nav {
margin:0;
padding:0;
}
aside {
background:red;
width:30%;
height:800px;
float:left;
}
.container {
position:relative;
height:800px;
width:70%;
background:teal;
float:right;
}
.container.stickied {
left:-100px;
}
.container .nav {
position:fixed;
background:yellow;
width:inherit;
}
TylerH..
13
这似乎是一个有趣的案例.让我们深入了解规范,了解正在发生的事情.
TL; DR: W3规范在这个领域非常模糊/未定义,但似乎所有浏览器都偏离规范,或者至少,他们做出了未定义细节的决定.然而,四个主要的浏览器(Firefox,Chrome,IE和Opera)是统一的,因为它们似乎都以同样的方式偏离了规范.Safari绝对是这里的奇怪人物.
这就是CSS2.1规范在第9章中所说的:视觉格式化模型:
9.1.2包含块 -在CSS 2.1中,许多盒位置和大小是相对于称为包含块的矩形框的边缘计算的.通常,生成的框用作包含后代框的块; 我们说一个盒子"建立"其后代的包含块.短语"一个包含块的块"意味着"盒子所在的包含块",而不是它生成的那个块.
这只是定义了包含块的内容.
9.3定位方案 -绝对定位:在绝对定位模型中,完全从正常流中移除一个框,并为相应的包含块指定一个位置.
这表示绝对定位的元素相对于包含块定位.
9.6绝对定位 -在绝对定位模型中,框相对于其包含块明确偏移.[...]本规范中对绝对定位元素(或其框)的引用意味着元素的position
属性具有值absolute
或fixed
.
这表示绝对定位的元素包括position:fixed;
元素和position: absolute;
元素.
9.6.1固定定位 -固定定位是绝对定位的子类别.唯一的区别是对于固定位置框,包含块由视口建立.
并且这表示position: fixed;
元素具有视口(嗯,不是字面上的视口,而是具有与视口相同的尺寸和位置的框)作为其包含框.稍后将通过10.1包含块的定义来备份:
如果元素具有'position:fixed',则包含块由视口[...]建立
(如果您不熟悉视口的内容,则它是"用户查阅文档的屏幕上的窗口或其他查看区域".视口的尺寸是初始包含块的基础.整个HTML content(
,
等)驻留在视口定义的初始包含块中.)
因此,应用于它的元素
position: fixed;
应该具有等于视口的
包含块或
初始包含块.
现在确定.nav
元素属性的第一步已经完成,我们可以确定浏览器应该如何表现.
CSS2.1规范有这样的说法:
9.7'display','position'和'float'之间的关系 -否则,如果'position'的值为'absolute'或'fixed',则该框绝对定位,'float'的计算值为'none' ,并根据下表设置显示.框的位置将由"顶部","右侧","底部"和"左侧"属性以及框的包含块确定.
这基本上是告诉我们,对于绝对定位元素(position: fixed;
或position: absolute;
),任何float
性质都被忽略,该元件(其中包括)被设置为
display: block;
,与该元件根据其框定位偏移的值
top
,
right
,
bottom,
和/或
left
在组合使用初始包含块(视口).
9.3.2框偏移:'top','right','bottom','left' -如果一个元素的'position'属性的值不是'static',则称该元素被定位.定位元素生成定位框,根据四个属性布局:顶部,右侧,底部,左侧.
这只是重申应根据其箱子偏移定位的事实.
虽然它在几个地方说如果两个相反的偏移值是auto
,那么它们被设置为零,CSS2.1似乎没有指定如何定位具有两个left
和right
零值的元素的情况.但是,CSS Box对齐模块Level 3确实提到该值设置为"start",其定义为:
将对齐主体与对齐容器的起始边缘齐平对齐.
这应该意味着元素位于包含块的左上角,对于position: fixed;
元素,它应该与视口相同.但是,我们可以看到,对于所有主流浏览器,情况并非如此.无主流浏览器似乎设置position: fixed;
包含块到视口的通过规范的指示.相反,他们都表现得好像行为应该在position: fixed;
和之间相同position: absolute;
.
总而言之,当您在规范自己的话中有这么多证据时,答案是明确的:position: fixed;
元素应该有一个设置到视口的包含块.同样清楚的是,供应商都决定以他们自己的方式填写一个模糊的部分规范,与此声明相冲突或完全无视此声明.最有可能发生的事情是,一个浏览器实现了他们的解释(IE7是第一个支持position: fixed;
,我相信,随后很快就会被Firefox 2.0支持),其余的跟随.
1> TylerH..:
这似乎是一个有趣的案例.让我们深入了解规范,了解正在发生的事情.
TL; DR: W3规范在这个领域非常模糊/未定义,但似乎所有浏览器都偏离规范,或者至少,他们做出了未定义细节的决定.然而,四个主要的浏览器(Firefox,Chrome,IE和Opera)是统一的,因为它们似乎都以同样的方式偏离了规范.Safari绝对是这里的奇怪人物.
这就是CSS2.1规范在第9章中所说的:视觉格式化模型:
9.1.2包含块 -在CSS 2.1中,许多盒位置和大小是相对于称为包含块的矩形框的边缘计算的.通常,生成的框用作包含后代框的块; 我们说一个盒子"建立"其后代的包含块.短语"一个包含块的块"意味着"盒子所在的包含块",而不是它生成的那个块.
这只是定义了包含块的内容.
9.3定位方案 -绝对定位:在绝对定位模型中,完全从正常流中移除一个框,并为相应的包含块指定一个位置.
这表示绝对定位的元素相对于包含块定位.
9.6绝对定位 -在绝对定位模型中,框相对于其包含块明确偏移.[...]本规范中对绝对定位元素(或其框)的引用意味着元素的position
属性具有值absolute
或fixed
.
这表示绝对定位的元素包括position:fixed;
元素和position: absolute;
元素.
9.6.1固定定位 -固定定位是绝对定位的子类别.唯一的区别是对于固定位置框,包含块由视口建立.
并且这表示position: fixed;
元素具有视口(嗯,不是字面上的视口,而是具有与视口相同的尺寸和位置的框)作为其包含框.稍后将通过10.1包含块的定义来备份:
如果元素具有'position:fixed',则包含块由视口[...]建立
(如果您不熟悉视口的内容,则它是"用户查阅文档的屏幕上的窗口或其他查看区域".视口的尺寸是初始包含块的基础.整个HTML content(
,
等)驻留在视口定义的初始包含块中.)
因此,应用于它的元素
position: fixed;
应该具有等于视口的
包含块或
初始包含块.
现在确定.nav
元素属性的第一步已经完成,我们可以确定浏览器应该如何表现.
CSS2.1规范有这样的说法:
9.7'display','position'和'float'之间的关系 -否则,如果'position'的值为'absolute'或'fixed',则该框绝对定位,'float'的计算值为'none' ,并根据下表设置显示.框的位置将由"顶部","右侧","底部"和"左侧"属性以及框的包含块确定.
这基本上是告诉我们,对于绝对定位元素(position: fixed;
或position: absolute;
),任何float
性质都被忽略,该元件(其中包括)被设置为
display: block;
,与该元件根据其框定位偏移的值
top
,
right
,
bottom,
和/或
left
在组合使用初始包含块(视口).
9.3.2框偏移:'top','right','bottom','left' -如果一个元素的'position'属性的值不是'static',则称该元素被定位.定位元素生成定位框,根据四个属性布局:顶部,右侧,底部,左侧.
这只是重申应根据其箱子偏移定位的事实.
虽然它在几个地方说如果两个相反的偏移值是auto
,那么它们被设置为零,CSS2.1似乎没有指定如何定位具有两个left
和right
零值的元素的情况.但是,CSS Box对齐模块Level 3确实提到该值设置为"start",其定义为:
将对齐主体与对齐容器的起始边缘齐平对齐.
这应该意味着元素位于包含块的左上角,对于position: fixed;
元素,它应该与视口相同.但是,我们可以看到,对于所有主流浏览器,情况并非如此.无主流浏览器似乎设置position: fixed;
包含块到视口的通过规范的指示.相反,他们都表现得好像行为应该在position: fixed;
和之间相同position: absolute;
.
总而言之,当您在规范自己的话中有这么多证据时,答案是明确的:position: fixed;
元素应该有一个设置到视口的包含块.同样清楚的是,供应商都决定以他们自己的方式填写一个模糊的部分规范,与此声明相冲突或完全无视此声明.最有可能发生的事情是,一个浏览器实现了他们的解释(IE7是第一个支持position: fixed;
,我相信,随后很快就会被Firefox 2.0支持),其余的跟随.
推荐阅读
-
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
-
SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范,与html5的使用有所区别SVG绘制出来的是矢量图,放大之后不会失真官方文 ...
[详细]
蜡笔小新 2023-10-14 15:30:33
-
-
1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ...
[详细]
蜡笔小新 2023-10-14 15:02:27
-
目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ...
[详细]
蜡笔小新 2023-10-13 22:01:54
-
本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ...
[详细]
蜡笔小新 2023-12-14 20:58:32
-
最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
-
1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ...
[详细]
蜡笔小新 2023-12-13 18:03:01
-
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
-
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
-
本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ...
[详细]
蜡笔小新 2023-12-13 11:21:32
-
爬取笔趣阁小说(搜索爬取)首先看看最终效果(gif):实现步骤:1.探查网站“http:www.xbiquge.la”,看看网站的实现原理 ...
[详细]
蜡笔小新 2023-10-13 11:41:31
-
蜡笔小新 2023-10-13 11:36:06
-
Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ...
[详细]
蜡笔小新 2023-10-09 19:41:30
-
background:-webkit-gradient(linear,10%10%,100%100%, ...
[详细]
蜡笔小新 2023-09-25 18:49:33
-
1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ...
[详细]
蜡笔小新 2023-09-17 19:38:46
-
手机用户2502906225
这个家伙很懒,什么也没留下!