Question

我有一个引导形式的输入组：

<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">Browse<input type="file" name="id_document" style="display:none" class="form-control" required id="id_id_document"></span>
    </label>
    <input type="text" class="form-control" id="id_document_filename" placeholder="No File Selected" readonly>
</div>

我想在按钮上放置一个覆盖层，该覆盖层与按钮的大小和位置相匹配：

SCSS：

.btn {
    background-image: url(/static/img/btn_bg.png);
    &::before {
        content: "";
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(255,255,255,0.9);
    }
}

问题是，如果position：relative，则元素与按钮完全匹配（根据safari devtools），但不显示。如果我将其更改为position：absolute，它将显示，但现在是整个元素的大小。

提琴，尽管这里由于某种原因，按钮的高度小于输入框的高度，这使得在position：absolute时很难看到。在我的网站上，情况并非如此：https://jsfiddle.net/aq9Laaew/205866/

CSS ::在不显示位置之前：相对

0 个答案: