div+CSS如何让两个区域重叠然后用鼠标往下滚动重叠的区域遮住后显示出来固定在浏览器最上并且固定?

html-css013

div+CSS如何让两个区域重叠然后用鼠标往下滚动重叠的区域遮住后显示出来固定在浏览器最上并且固定?,第1张

固定在顶部要使用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更大的数值的目的也就是为了保证该层能一直显示在最上!