Web前端技术（HTML5+CSS3+响应式设计 课件 6--浮动与定位.ppt

InternetExplorer、Edge15以及更早的版本不支持粘性定位。Safari需要-webkit-前缀。*****6.2定位四、绝对定位绝对定位的偏移量是以最近一个具有定位属性的父元素作为基准，如所有父元素均无定位属性，则以文档主体body为基准采用绝对定位的元素会从标准流中脱离出来，后面的元素会向上移动占领它在标准流中初始的位置通常使用“父相子绝”的原则，即父元素设置为相对定位，但不设置偏移量，使其保留在标准流中，子元素设置为绝对定位。案例：demo6-6.html（a）绝对定位前（b）绝对定位后（以父元素为基准）（c）绝对定位后（以body为基准）6.2定位五、固定定位固定定位fixed与绝对定位类似，但它始终以文档主体body作为定位的基准线，并且不会随着滚动条进行滚动。固定定位最常见的一种用途是在页面中创建一个固定区域，例如返回顶部的按钮及网页里的小广告等。6.2定位六、粘贴定位粘贴定位sticky的元素依赖用户的滚动位置进行定位；在相对定位和固定定位之间切换，起先它表现为相对定位，当页面滚动超出指定阈值时，它的表现就像固定定位；只有指定top、right、bottom或left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。6.2定位六、粘贴定位/*为top设置粘贴定位*/.top{ position:sticky; top:5px; /*设置阈值*/}案例demo6-7.html.top元素随页面滚动到达top：5px；则固定在该位置不再随页面向上滚动。6.2定位七、z-index在浮动和定位的实现过程中，都出现过多个元素在垂直空间上发生层叠的现象（a）带背景色的元素层叠 （b）无背景色的元素层叠6.2定位七、z-index所有元素的z-index值默认是0；z-index属性仅对定位元素有效；z-index取整数值，不能加单位，可以是正数也可以是负数，值越大定位元素在层叠元素中越居上；z-index值相同时，浮动元素和定位元素位于标准流中其他元素的上方；浮动元素与定位元素层叠时，默认情况下，定位元素位于浮动元素上方，后定义的定位元素位于先定义的定位元素上方，但可以通过修改定位元素的z-index值改变层叠顺序。案例：demo6-8.html6.3导航条的制作导航条是网站的重要组成部分，通过导航条用户可以方便的在网站内部切换栏目，因此导航条的制作是网站的基本技术，也是浮动技术的主要应用之一。通过前面所学的浮动、链接伪类、盒模型等知识，以/网站的导航条为案例，详细介绍水平导航条制作。6.3导航条的制作一、列表属性项目列表除了自身的功能，在html中，常用来组织导航条的栏目,因为有序的排列文字更容易被搜索引擎搜录，有助于网站优化seo（搜索引擎优化）。项目列表主要采用ul或者ol标记，然后配合li标记列出导航栏中的各项。6.3导航条的制作一、列表属性list-style-type，定义列表前面的符号，可用值：none|disc|circle|squarelist-style-position，定义列表符号的位置，可用值：outside|insideoutside：默认值，保持标记位于文本的左侧。inside：列表项目标记放置在文本以内list-style-image：url（）；使用图像来替换列表项的符号经常用背景图来取代这个属性，因为背景图可以随意设置位置。list-style：复合属性list-style:列表项目符号列表项目符号的位置列表项目图像；list-style:列表项目符号列表项目符号的位置列表项目图像;6.3导航条的制作二、制作导航条（1）搭建导航条的HTML结构用无序列表组织导航条的栏目，整体放入一个div中，关联类名nav，代码如下：divclass=navulliahref=#HTML/CSS/a/liliahref=#BrowserSide/a/liliahref=#ServerSide/a/li…/ul/div6.3导航条的制作二、制作导航条（2）清除标记的默认样式列表元素有内外边距、列表符号，超级链接有下画线、字体颜色等默认样式，在初始样式设置时，统一清除。代码如下：ul,li{ margin:0; padding:0; list-style:none;}a{col