1

次のフィドルを検討してください。ドロップ シャドウのある吹き出しの下部に矢印を作成しようとしています。これは機能しています：

http://jsfiddle.net/tmcconechy/vT4rj/

ただし、ルートの左/上/幅を設定してダイアログを移動したい場合。

left: 9px;
position: absolute;
top: 36px;

次に、:after 矢印の位置がずれています。これを処理するために私が見ることができる方法は、 after: 要素を に設定することposition: relative;top: 100%です。しかし、それをするとすぐに形の矢印が壊れますか?

とにかくこれを処理できるので、矢印の位置はボックスのサイズと位置に相対的ですか?

4

3 に答える 3

4

これを試してください。

私がしたことは、目的の div の周りに相対的に配置された div を配置することだけでした。それが、移動する div です。MDNに従って、配置されている祖先 div がある限り、絶対配置は祖先の位置から外れて機能します。

HTML:

<div class="positioner" style="position: relative; top: 200px;">
    <div class="inline-popup"></div>
</div>
于 2013-06-12T18:33:57.333 に答える
3

これは、矢印の左の位置を固定の px ではなく 50% に変更することで実現しました。

left: 50%;

h/t http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

于 2013-06-12T18:48:34.417 に答える
1

この矢印は絶対位置に保持して、必要な場所に簡単に設定できるようにする必要があります。

たとえば、下から上に移動するには、上部の位置をガンジし、ボックスの影を逆にします:
http://jsfiddle.net/vT4rj/1/
そして、境界線を変更します:
http://jsfiddle.net/vT4rj/3/ 

.inline-popup:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.30);
    content: "";
    height: 18px;
    left: 176px;
    position: absolute;
    top: -9px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 18px;
}
于 2013-06-12T18:35:13.390 に答える