8-定位网页元素

定位网页元素第八章回顾设置页面元素浮动时，left和right有什么区别？如何清除一个网页元素的左浮动？使用clear与overflow扩展盒子高度的区别有哪些？提问预习检查position属性值absolute表示什么定位？网页常用的定位有哪几种？在CSS中如何设置网页元素的透明度？在网页中z-index对没有设置定位的网页元素有效吗？提问本章目标会使用position定位网页元素会使用z-index属性调整定位元素的堆叠次序定位position属性static：默认值，没有定位relative：相对定位absolute：绝对定位fixed：固定定位fixed目前还不被一些浏览器支持，实际网页制作中也不常用经验static定位static属性值没有定位，以标准流方式显示相对定位relative属性值相对自身原来位置进行偏移偏移设置：top、left、right、bottom示例#first{background-color:#FC9;border:1px#B55A00dashed;position:relative;top:-20px;left:20px;}#third{background-color:#C5DECC;border:1px#395E4Fdashed;position:relative;right:20px;bottom:30px;}相对定位元素的规律设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。设置相对定位的盒子仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响。浮动元素设置相对定位设置第二个盒子右浮动，再设置第一、第二盒子相对定位#second{background-color:#CCF;border:1px#0000A8dashed;float:right;}示例#first{background-color:#FC9;border:1px#B55A00dashed;position:relative;right:20px;bottom:20px;}#second{background-color:#CCF;border:1px#0000A8dashed;float:right;position:relative;left:20px;top:-20px;}相对定位小结设置了position属性值为relative的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。绝对定位absolute属性值偏移设置：left、right、top、bottom绝对定位小结使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。这个性质在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。#second{background-color:#CCF;border:1px#0000A8dashed;position:absolute;right:30px;}绝对定位不设置偏移量示例经验z-index属性调整元素定位时重叠层的上下位置z-index属性值：整数，默认值为0设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。z-index值大的层位于其值小的层上方网页元素透明度CSS设置元素透明度属性说明举例opacity:xx值为0~1，值越小越透明opacity:0.4;filter:alpha(opacity=x)x值为0~100，值越小越透明filter:alpha(opacity=40);小结网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。总结使用position属性定位页面元素。position属性值有static、relative、absolute和fixed，其中relative和absolute两种定位方式是网页制作中经常使用的。使用z-index属性设置定位元素的堆叠顺序。使用opacity:x或filter:alpha(opacity=x)方式设定网页元素的透明度。