html使用position:relative制作引导层
2018-01-16 10:29
197 查看
我们经常会遇到这样一种需求,就是在页面上加一个引导层,来告诉用户如何在页面上进行操作。这主需要在一个fixed的蒙层上实现精准定位。如何实现呢?我们就要利用position:relative了。position:relative是相对于自身进行定位,而且支持z-index。看下代码:
效果图:
<!DOCTYPE html> <html> <head> <title></title> <style> .mask{ position: fixed; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; left: 0; top: 0; } #myBtn{ position: relative; z-index: 10; } </style> </head> <body> <button id="myBtn">点我</button> <div class="mask"></div> </body> </html>
效果图:
相关文章推荐
- 使用position:relative制作下边框下的小三角
- 使用position:relative制作下边框下的小三角
- 使用Microsoft HTML Help Workshop制作CHM帮助文件
- 【HTML】【实践】使用Canvas制作网页小游戏
- html_position绝对定位与relative相对定位
- Html position(static | absolute | fixed | relative)定位
- html 元素定位position-relative, absolute, fixed, static
- html中position的一个小用法使用介绍
- HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))
- HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))
- 使用HTML5/CSS3五步快速制作便签贴特效
- 用HTML Help Workshop制作chm使用帮助文件的教程
- ---===HTML帮助文件的制作和使用(new)===---
- 使用table标签制作常用的html表格
- CSS中应用position的absolute和relative的属性制作浮动层
- 使用HTML5/CSS3五步快速制作便签贴特效
- android使用html+javascript来制作页面
- HTML+CSS之关于position的一些使用记录
- HTML网页制作:[12]使用框架结构之frameset
- Html position(static | absolute | fixed | relative)定位