用jquery在html中覆盖按钮图像

Question

我在将引导 glyphicon 图像覆盖在背景 img 上并将其作为按钮单击时遇到问题。

我还对我想要显示的其余页面使用 jquery 模板样式，例如翻板样式页面。

这里是html代码，问题是最后的代码sn -p

<body>
    <div id="st-container" class="st-container">
        <div class="st-pusher">
        <nav class="st-menu st-effect" id="menu">
           <img src="" style="height:50px;" alt="" />
            <ul id="url-list"></ul>
        </nav>

        <script id="pageTmpl" type="text/x-jquery-tmpl">
            <div class="${theClass}" style="${theStyle}">
                <div class="front">
                    <div class="outer">
                        <div class="content" style="${theContentStyleFront}">
                            <div class="inner">{{html theContentFront}}</div>
                        </div>
                    </div>
                </div>
                <div class="back">
                    <div class="outer">
                        <div class="content" style="${theContentStyleBack}">
                            <div class="inner">{{html theContentBack}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </script>

这是问题代码 - 如果我删除 style="float:left" 按钮是可点击的 - 那么问题是我的前后页面没有重叠，如果添加 style="float:left" 然后按钮不可点击，另一方面，img 与正面和背面页面重叠。

<div id="st-trigger-effects" style="float:left;">
    <button type="button" data-effect="st-effect" class="btn btn-default">
        <span class="glyphicon glyphicon-align-justify"></span>
    </button>
</div>

我厌倦了另一种变化

<div id="st-trigger-effects" class="imgoverlay">
    <button type="button" data-effect="st-effect" class="btn btn-default">
        <span class="glyphicon glyphicon-align-justify"></span>
    </button>
</div>

css 用于正文

body{
    font-family: 'Open Sans Condensed','Arial Narrow', serif;
    background: #ddd url(../img/background.jpg) repeat top left;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin: 0;
    overflow: hidden;
}

以及css中的overlay类

imgoverlay{
    position:absolute;
    left:0px;
    right:0px;
}

不知道是不是我错了，我还在学习css/html

Answer 1

缺少表示imgoverlay 是css 类的点。

.imgoverlay {
    position:absolute;
    left:0px;
    right:0px;
}

如果没有点，浏览器会查找名为imgoverlay 的标签。 使用点，浏览器会查找任何具有 imgoverlay 类的元素。