Css悬浮
给大家介绍一下position属性,下面是w3c给出的定义:
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。- absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
- relative 生成相对定位的元素,相对于其正常位置进行定位。
- static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- inherit 规定应该从父元素继承 position 属性的值。
在浏览网站的时候有时会看到最顶端一直悬浮bar,由于好奇研究了一下他的实理原理。一般有两种实现方式一种是通过纯Css样式控制,另种通过javascript脚本控制。今天着重讲解通过Css样式控制的。这时候fixed 派上用场了,通过官方定义和我自已的理解,不管是否出现滚动条都会一直悬浮在浏览器可视化区域。
定义样式:
#bar{ width:100%; height:50px; background-color:#f66012; position:fixed; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>fiexd</title> <style type="text/css"> *{margin:0;padding:0;} #bar { width:100%; height:50px; background-color:#f66012; position:fixed; } </style> </head> <body> <div id="bar"></div> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。