Question

我有一个div元素的以下CSS：

.tooltip 
{
    padding: .8em;  
    width: 12em; background:#999;  
    border-width: 2px !important;  
    border-color:#999;    
    position:absolute;
}  
.tooltip .pointer, .tooltip .inner-pointer   
{
    position:absolute;
    width:0;  
    height:0;  
    border-bottom-width: 0;  
    background: none;  
}  
.tooltip .pointer {  
    border-left: 7px solid transparent;  
    border-right: 7px solid transparent;  
    border-top: 14px solid #999;  
    bottom:    -14px;  
    right: auto;  
    left: 5%;  
    margin-left: -7px;  
}  
.tooltip .inner-pointer {  
    border-left: 5px solid transparent;  
    border-right: 5px solid transparent;  
    border-top: 5px solid #999;  
    bottom: auto;  
    top: -14px;  
    left: -5px;  
}

这是DIV信息

<div class="tooltip">Tooltip content goes here...<div class="pointer"><div class="inner-pointer"></div></div></div>

它下面的一行，但是切入这个工具提示的底部，我如何确保它占用了它应该占用的所有空间？

以下是jsFiddle的一个例子：

http://jsfiddle.net/WEgBW/1/

Answer 1

假设问题是某些内容与您的工具提示重叠，那么您应该在z-index上添加.tooltip

.tooltip 
{
    padding: .8em;  
    width: 12em; background:#999;  
    border-width: 2px !important;  
    border-color:#999;    
    position:absolute;
    z-index: 999; /* added this line */
}

占用布局空间

1 个答案: