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

マークアップが適切にネストされていません。ラベルタグには終了ラベルタグが必要です。終了スパンタグではありません。