叠加层出现在按钮上方

Question

我一直在 Internet 上寻找一个按钮示例，单击该按钮时会在按钮正上方显示一个叠加层。这意味着覆盖框底部将与按钮顶部对齐。只是想知道是否有人有这方面的例子？

Answer 1

抱歉，我的问题过于笼统。以下是我为获得肯定结果所做的一些代码：

<html>
<head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
    <script type="text/javascript">
      function setVisibility(id) {
        if(document.getElementById('bt1').value=='Hide Layer'){
          document.getElementById('bt1').value = 'Show Layer';
          document.getElementById(id).style.display = 'none';
        }else{
          document.getElementById('bt1').value = 'Hide Layer';
          document.getElementById(id).style.display = 'inline';
        }
      }
    </script>
    <style type="text/css">

        #container {
            width:1px;
            height:1px;
            position: relative;
        }
        #nav,
        #data {
            display:block;
            position:absolute;
            width:100%;
            bottom:100%; /* change to TOP and it will drop down */
            background: #fff;
        }

        #data{
            z-index: 10;
        }

    </style>
</head>
<body>
    <p>test text</p>
    <p>test text</p>
    <p>test text</p>
    <p>test text</p>
    <div id="container">
        <div id="nav"></div>
        <div id="data" >
            blah<br>
            blah<br>
            blah<br>
            blah<br>
        </div>
    </div>
    <input type=button name=type id='bt1' value='Hide Layer'
       onclick="setVisibility('data')";>
    <script> setVisibility('data'); </script>
</body>
</html>

叠加层出现在按钮上方

Overlay appear above a button

html

javascript

css

overlay

button