html – 表内的绝对定位

@H_502_1@我需要在td中定位具有绝对定位的东西.为了解决在将td设置为relative时未定义td的事实,我在我的td中使用div设置为relative,然后在div中我将内部div设置为absolute.当我的内容填满td时,这一切都很有效.当我将td的内容设置为none时,绝对定位会全部搞砸.

@H_502_1@有谁知道为什么会这样.

@H_502_1@HTML：

@H_502_1@


@H_502_1@和CSS：
@H_502_1@
td{
    border:1px solid red;
    width:100px;
    height:60px;
    vertical-align:bottom;
}

.slot{
  width:100px;
  height:29px;
  background-color:#999;
  border:1px dashed blue;
}

.relative{
    position:relative;
}

.absolute{
    position:absolute;
    top:5px;
    left:5px;
}
.hidden{
    display:none;
}

@H_502_1@现场版：http://jsfiddle.net/HgEtQ/
@H_502_1@在上面的小提琴中,您可以看到第一个表格单元格正常工作.绝对定位的div位于正确的空间中.第二个隐藏了顶部插槽,现在绝对定位不再位于左上角.如果你取出两个插槽,那么它确实搞砸了绝对定位.我需要将它定位为绝对值,因为某些元素会根据元素移动.


最佳答案
这里有几件事情要发生.
@H_502_1@你有这个：
@H_502_1@
td {
    /*...*/
    vertical-align:bottom;
}

@H_502_1@这将把细胞的内容推到底部.
@H_502_1@此外,绝对定位的元素是removed from the normal flow,因此它不会对其父级的高度做出贡献：
@H_502_1@

@H_502_1@It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned Box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants.

@H_502_1@特别是,这意味着你的div.relative元素的高度为零,但它们仍然会有一个左上角,所以你的绝对定位偏移量会被固定在某个地方.
@H_502_1@然后你有< div class =“slot hidden”>并隐藏删除< div>从布局,所以你有效地拥有这个：
@H_502_1@

@H_502_1@结合vertical-align：bottom意味着你的第二个div.absolute将位于div.slot顶部5px,距离表格底部25px.
@H_502_1@第一个单元格工作正常,因为两个可见的div.slot元素将div.relative右推到单元格的顶部,然后div.absolute位于div.relative顶部5px,距离顶部5px表格单元格.
@H_502_1@不幸的是,添加位置：相对于< td>对于浏览器来说有点狡猾,所以你需要一些hackery来保持你的定位,同时保持vertical-align：bottom.您可以像这样重新组织< td>：
@H_502_1@

@H_502_1@这样的CSS：
@H_502_1@
td{
    border:1px solid red;
    width:100px;
    height:60px;
    vertical-align: top;
}

.slot{
    width:100px;
    height:29px;
    background-color:#999;
    border:1px dashed blue;
}

.relative {
    position:relative;
}
.nonsense {
    height: 62px; /* td[height] + 2 for the borders */
    display: table-cell;
    vertical-align: bottom;
}

.absolute{
    position:absolute;
    top:5px;
    left:5px;
}
.hidden{
    display:none;
}

@H_502_1@实例：http://jsfiddle.net/ambiguous/aV4nT/
@H_502_1@或者你可以使用visibility: hidden：
@H_502_1@

@H_502_1@hidden

  The generated Box is invisible (fully transparent,nothing is drawn),but still affects layout. Furthermore,descendants of the element will be visible if they have ‘visibility: visible’.

@H_502_1@你的.hidden类代替display：none：
@H_502_1@
.hidden {
    visibility: hidden;
}

@H_502_1@这将使div.slot元素占用空间并影响布局,但只会看到第二个.
@H_502_1@实例：http://jsfiddle.net/ambiguous/RcdNh/

html – 表内的绝对定位

猜你在找的HTML相关文章