css - 底部右侧绝对定位问题

Question

我试图在 div 容器的右下角放置一个复选框。容器在悬停时会增加高度，我希望复选框具有粘性，以便在 div 增长时保持在右下角。

我在使复选框位于右下角时遇到了一些真正的麻烦。

这是我的代码和一个Fiddle。

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</span>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>

---

.objectWrap {
    position:relative;
    float:left;
    height:75px;
    margin-bottom:15px;
}
    .objectWrap:not(:last-child) {
        margin-right:15px;
    }
    .objectWrap:hover {
        cursor:pointer;
    }

.calendarObject {
    position:relative;
    width:72px;
    height:75%;
    background-color:#f5f5f5;
    border-radius:5px;

    transition: height 400ms;
    -webkit-transition: height 400ms;
}
    .calendarObject label.objectTitle {
        position:absolute;
        top:3px;
        left:3px;

        font-size:13px;
        color: #8998a4;
    }
    .calendarObject input[type="checkbox"] {
        position:absolute;
        bottom:0px;
        right:0px;
    }
    .calendarObject:hover {
        height:100%;
        transition: height 400ms;
        -webkit-transition: height 400ms;
    }

Answer 1

您的代码中有错误。</span>应该是</label>。

更正的 HTML：

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</label>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>​

更正了 JS 小提琴

Answer 2

您的标记未正确嵌套..您的标签标签需要一个结束标签标签..而不是一个结束跨度标签。