Html 占用布局空间

对于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 class="tooltip">Tooltip content goes here...<div class="pointer"><div class="inner-pointer"></div></div></div>

工具提示内容显示在此处。。。

如果在它下面的那一行，不管它如何切入工具提示的底部，我如何确保它占据了它应该占据的所有空间

以下是JSFIDLE中的一个示例：

---

假设问题在于工具提示重叠，那么您应该在

工具提示上添加
z-index

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

你能创建一个jsbin并进一步解释这个问题吗？你能帮我们把它装配起来吗？不确定你最后一行是什么意思。你能贴一张你是怎么看的截图吗？这是一把小提琴。不确定是什么问题？不是问题，工具提示根本不占空间。。。实际上我希望它占用空间…@DalexL，因为它是
position:absolute
它将从流中删除。请在jsfiddle.net上为我们制作一个工作示例，并详细描述您希望发生的事情。@DalexL，您可以将位置设置为相对位置，并给出一个底部边距。。