CSS：水平位置彈出所需位置

Question

我有這個按鈕，點擊時顯示一個彈出。

彈出窗口是一個div元素，開頭爲display:none。點擊按鈕後，我設置display:block顯示彈出窗口。

彈出窗口的垂直位置正好;在調用按鈕上方。但是，我無法將向下箭頭（語音氣泡？）置於調用按鈕中央的位置。

1. 這可以用CSS來完成嗎？
2. 我也可以使用javascript解決方案，只要我不必拉入依賴關係即可。
3. 我很喜歡改變HTML的結構。我有的約束是彈出和按鈕都必須在同一個容器中。按鈕可以放置在這個容器的任何地方。

也許一些代碼將有助於：

HTML：

<div id="container"> 
    <input type="button" id="myButton" value="Click Me!"> 
    <div class="sf-su-response sf-popup-panel popup"> 
     Sorry, I don't know :(
    </div> 
</div> 

CSS：

#container { 
    position: relative; 
    top: 150px; 
    left: 50px; 
    width: 300px; 
    text-align: right; 
    background: tomato; 
} 

.sf-popup-panel { 
    display: none; 
    position: absolute; 
    background-color: white; 
    border: 1px solid #ccc; 
    width: 200px; 
} 

.sf-popup-panel.popup { 
    top: auto; 
    right: 0; 
    bottom: 100%; 
    left: auto; 
} 

.sf-popup-panel.open { 
    display: block; 
} 

.sf-popup-panel.popup.open:before { 
    position: absolute; 
    display: block; 
    content: " "; 
    border: 14px solid transparent; 
    border-top-color: #ccc; 
    top: 100%; 
    right: auto; 
    left: 50%; 
    width: 0px; 
    margin-left: -1px; 
} 

.sf-popup-panel.open:after { 
    position: absolute; 
    display: block; 
    content: " "; 
    border: 13px solid transparent; 
    border-top-color: white; 
    top: 100%; 
    right: auto; 
    left: 50%; 
    width: 0px; 
} 

.sf-su-response { 
    padding: 15px;  
} 

的JavaScript：

$('#myButton').click(function(){ 
    $(".sf-su-response").toggleClass("open"); 
}); 

的jsfiddle

http://jsfiddle.net/Ru5aX/

編輯： 從答案來看，到目前爲止，也許，我的問題不是很清楚。

基本上按鈕可以放在父div的任何位置。在設計時我無法對它的位置做出假設。因此，在設計時將right或left設置爲特定值的解決方案對我無效。

當然，如果我可以以某種方式指定相對於按鈕定位該彈出窗口，將會起什麼作用呢？但是，我不知道該怎麼:(

EDIT2

這就是我得到：

這就是我想要的：

Answer 1

因此，這裏是爲你所要求的解決方案。

http://jsfiddle.net/moellerb/vmUuc/

闡釋 你的 「容器」 具有300像素設定寬度。由於這是彈出窗口的父元素，因此彈出窗口相對於該容器的空間定位。爲了追蹤按鈕的位置而不使用沉重的JavaScript，我會將按鈕和彈出包裝到另一個包裝容器（.btn-wrap）中。將其設置爲按鈕尺寸，以便將包容尺寸保持在按鈕的所需區域。

<div id="container"> 
    <div id="btn-wrap"><!-- add another wrap around your button/popup --> 
     <input type="button" id="myButton" value="Click Me!"/> 
     <div class="sf-su-response sf-popup-panel popup"> 
      Sorry, I don't know :(
     </div> 
    </div> 
    <span class="clear"></span> 
</div> 

對顯示指針的彈出面板類進行了一些調整。這將使指針保持在按鈕的中心位置，並保持面板右對齊，就像您在示例中所要求的那樣。

#btn-wrap { 
    /* you could position it absolute, the popup will follow */ 
    position:relative; 
    float:right; 
    /* try any of these alternatives to float:right 
    margin-left:100px; 
    float:left; 
    */ 

    /*Set the input/button container dimensions = button size*/ 
    width: 65px; 
    height: 20px; 
} 

.sf-popup-panel.popup.open:before { 
    ........ 
    .... 
    right: 13px; /* set right instead of left */ 
    left: auto; 
    width: 0px; 
    margin-left: -1px; 
} 

.sf-popup-panel.open:after { 
    ........ 
    .... 
    right: 13px; /* set right instead of left */ 
    left: auto; 
    width: 0px; 
} 

Answer 2

嘗試更改如下： -

.sf-popup-panel.popup { 
     top: auto; 
     right: -70px; 
     bottom: 100%; 
     left: auto; 
    } 

Answer 3

這應該做的伎倆：

.sf-popup-panel.popup.open:before,.sf-popup-panel.open:after { 
    right: 40px; 
} 

不要忘記刪除left:50%。

fiddle

Answer 4

試試這個：

.sf-popup-panel { 
    display: none; 
    position: absolute; 
    background-color: white; 
    border: 1px solid #ccc; 
    width: 200px; 
    margin-bottom:10px; 
} 




.sf-popup-panel.popup.open:before { 
    position: absolute; 
    display: block; 
    content: " "; 
    border: 14px solid transparent; 
    border-top-color: #ccc; 
    top: 100%; 
    right: auto; 
    left: 80%; 
    width: 0px; 
    margin-left: -1px; 
} 

.sf-popup-panel.open:after { 
    position: absolute; 
    display: block; 
    content: " "; 
    border: 13px solid transparent; 
    border-top-color: white; 
    top: 100%; 
    right: auto; 
    left: 80%; 
    width: 0px; 
}