Javascript左右滑動div - 但有點“耳朵”

Question

我希望能夠左右滑動div ...我已經閱讀了其他帖子並使用按鈕點擊它。

但

我希望有一個漂浮的“耳朵”（小圓形圖標，就像一個按鈕），它會粘在div的右上角。 這個'耳朵'將作為在窗體中左右滑動的按鈕。

我的問題是......如何將這個小耳棒固定在div的右上角，但讓它懸掛在div上方和外面。
另一種說法是，我希望有一個浮動div，它會粘在div的右上角，而不管其他div位於何處。

我想要另一個包含圖形的div，並強制“耳朵”的位置是“耳朵”應該附加到div的右上角。

謝謝

Answer 1

像這樣的東西可能會起作用：

#container {
    position:relative;
    overflow:visible;
}
#ear {
    position:absolute;
    left: 100%; /* hang over right edge */
    top: 0;
}

假設這個HTML：

<div id="container">
    <div id="ear">Click me!</div>
    Look at me, I'm a moving box!
</div>

Answer 2

我正在使用這樣的實現：

<div class="tooltip">
    <div class="tooltip-inner">I'm a tooltip</div>
    <div class="tooltip-ear"></div>
   <!--tooltip-ear last so you can float it over tooltip-inner without z-index-->
</div>

造型：

.tooltip { position: absolute; left: 0; top: 0; width: 200px; }
.tooltip-inner { padding-right: 10px; } /* make space for the ear */
.tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }

您可以為.tooltip-inner添加邊框。 並有一個圖形，為耳朵做邊框。 您可以將耳朵向左移動1px，使其覆蓋.tooltip-inner邊框，使邊框看起來流暢。

您甚至可以更進一步，添加.tooltip-orientation-top-left或.tooltip-orientation-bottom-right ，只需更改一個類即可更改耳朵的位置。

你的風格如下：

.tooltip.tooltip-orientation-top-left .tooltip-inner { padding-right: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-inner { padding-left: 10px; }
.tooltip.tooltip-orientation-top-left .tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-ear { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; }