固定在顶部要使用css属性的position:fixed
做了个demo,大概的样式就是这样,具体的就要看做的时候需求是哪种了,附上图片
demo的html样式和css,如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style>
*{margin:0pxpadding:0px}
#edg_box{width:100%height:1500pxbackground:#cccposition:relative}
.edg_fixed{width:100%height:35pxline-height:35pxfont-size:14pxcolor:#fffposition:fixedtop:0pxleft:0pxtext-align:centerbackground:green}
.edg_cont{width:100%margin-top:35px}
</style>
</head>
<body>
<div id="edg_box">
<div class="edg_fixed">这是一个div始终固定在顶部的</div>
<div class="edg_cont">这是一个内容区域的div,装载的是内容</div>
</div>
</body>
</html>
根据W3C
CSS2.1
规范中的描述,'z-index'
应用于定位元素(
'position'
特性不是
static
),它接受整数值,默认值为
auto。
意思就是说'z-index'
只有在层有绝对或者相对定位的时候才会起作用,'z-index'
默认值为auto。
如果2个或2个以上通过绝对或者相对定位的层有重叠的时候,这个时候'z-index'
的值谁的大就那个层显示在最上面!直接设置个999或者是比999更大的数值的目的也就是为了保证该层能一直显示在最上!