背起佈局空間

我有一個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/

來源

2011-07-24 FreeSnow

您可以創建添加z-index一個jsbin並解釋一下更多的問題？ –

你可以在http://jsfiddle.net爲我們安裝它嗎？ – adarshr

不確定你最後一行的含義。你能發表你如何看它的截圖嗎？ – adarshr

假設的問題是，一些重疊的工具提示，那麼你應該在.tooltip

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

來源

2011-07-24 19:17:48

不是問題，工具提示只是不佔用空間...我實際上希望它佔用空間... – FreeSnow

@DalexL，因爲它是'position：absolute'，它會從流中移除。請在jsfiddle.net上爲我們製作一個工作示例，並詳細描述您想要發生的事情。 –

@DalexL，您可以將位置設置爲「相對」並給出底部邊距.. ** [演示]（http://jsfiddle.net/gaby/WEgBW/2/）** –

背起佈局空間

回答

相關問題