<div id="reminder" style="background-color: rgba(0,0,0,0.5); position: fixed; width: 100%; height: 100%; display: none; top: 0; left: 0;">
<div style="background-color: rgba(255,255,255,1); position: fixed; width: 400px; margin: -200px 0 0 -200px; top: 50%; left: 50%;border-radius: 5px">
<div><span>警告</span></div>
<div><span>确认要删除？</span></div>
<button id="myconfirm" >确定</button>
<button id="mycancel" >取消</button>
<input type="text" id="mineid" value="" style="display: none">
</div>
</div>
如上就是在页面上设置一个弹出框的样式。
最主要的就是position选项了
position有几种属性，static 就是最普通的没有什么特别的东西就是继续在接下去的div中接下去做事。并且不会受到left， top， z-index，这些申明
relative 生成相对路径在当前位置进行的定位。
absolute 生成绝对定位，在实现的时候就是按照除了static以外的第一个父页面来定位，所以他不会随着滚动条滚动
fixed 生成绝对路径，相对于浏览器窗口来实现定位，所以他会随着滚动条滚动但是在界面上看不见他在动。
left top 表示的是当前div的位置，top：50%就表示是离上面面一半的位置开始。
inherit 继承父页面的position
z-index 这就是优先级
z-index默认是0 所以在将优先级设置成-1后会被优先级为0的覆盖掉
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
![]()
如上图就是在同一个页面上设置了绝对位置，然后将它的优先级调的比较小然后就变成了背景图片一样的存在。当被设置成0的时候图片就会将字覆盖掉因为绝对路径是浮动的所以是在上面。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
