html使用position:relative制作引导层

最新推荐文章于 2023-07-07 08:00:31 发布

shidaping

最新推荐文章于 2023-07-07 08:00:31 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： html 引导层

本文链接：https://blog.csdn.net/shidaping/article/details/79071827

版权

web前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

我们经常会遇到这样一种需求，就是在页面上加一个引导层，来告诉用户如何在页面上进行操作。这主需要在一个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>

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

shidaping

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html使用position:relative制作引导层

我们经常会遇到这样一种需求，就是在页面上加一个引导层，来告诉用户如何在页面上进行操作。这主需要在一个fixed的蒙层上实现精准定位。如何实现呢？我们就要利用position:relative了。position:relative是相对于自身进行定位，而且支持z-index。看下代码：<!DOCTYPE html><html><head> <title></title> <style>
复制链接

扫一扫