html - 我怎样才能让这个旋转的锚定位在右侧？

Question

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

我用了this example作为滑出式面板的起点。但是触发滑动面板的 anchor 占用的屏幕空间比我想要的要多，所以我想将它旋转 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

绝对定位元素将仅相对于它们的父容器起作用，确保放置 anchor 的主容器添加了 position:relative; 属性。