底部，正确的绝对定位问题

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>​

Corrected JS Fiddle

Answer 2

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