底部右侧绝对定位问题

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

您的标记不正确嵌套..您的标签标记需要关闭标签标记..不关闭span标记。