如何将这个旋转的锚定位在右侧？

Question

我正在尝试做的是放置一个滑出式面板jQuery，以显示有关我网站上所选食谱的一些辅助信息。

我使用this example作为滑出式面板的起点。但触发滑动面板的锚点占据了比我想要的更多的屏幕空间，因此我想将其旋转90度并将其放置在页面的右侧。我查看this site了解如何进行旋转的示例。基本上我最终得到的是这样的：

<a class="trigger" href="#">Nutrition</a>

和一些看起来像这样的css：

a.trigger{
    position: absolute;
    text-decoration: none;
    top: 100px; 
    right: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 15px;
    font-weight: 700;
    background:#333333;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);   
}

结果如下：

因此，CSS中的right:0爵士乐似乎无法解决问题。这不是对抗右侧。它似乎被原始宽度偏移，就像它旋转时矩形的左下角是原点。 （顺便说一句，这是在IE中 - 这通常是我们在内部使用的。）

我没有看到偏移参数或指定原点位置的方法。可能是因为我在搜索中错过了这个页面，它解释了如何做到这一点 - 如果是这样，我会对它的链接感兴趣，或者如果你有想法如何解决这个问题，我会很感激听听如何做或者用不同的方式来完成我想做的事。

Answer 1

绝对定位元素仅相对于其父容器起作用，请确保包含锚点的主容器添加了position:relative;属性。