将页面左侧的标签移动到右侧答案

【问题标题】：Move tab on left side of page to right side将页面左侧的标签移动到右侧
【发布时间】：2016-07-15 14:51:41
【问题描述】：

我有一个当前位于屏幕左侧的选项卡。我想做的是将它移到右侧并向上移动一些。我将在左侧发布我所拥有的内容：

CSS

#feedback {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 250px;
        margin-left: -3px;
        margin-bottom: -3px;
    }

    #feedback-tab {
        float: right;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
        width: 120px;
        height: 42px;
        background-color: rgba(0,0,0,0.5);
        margin-top: 60px;
        margin-left: -42px;
        padding-top: 5px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #feedback-tab:hover {
        background-color: rgba(0,0,0,0.4);
    }

HTML

<div id="feedback">
    <div id="feedback-tab">Feedback</div>
</div>

【问题讨论】：

可以加个 JSBin 或 JsFiddle 链接吗？
jsfiddle.net/89fjamf8

标签： html css twitter-bootstrap

【解决方案1】：

我想这就是你想要的。

CSS：

#feedback {
        position: fixed;
        right: 0;
        bottom: 150px;
        height: 250px;
        margin-left: -3px;
        margin-bottom: -3px;
    }

    #feedback-tab {
        float: right;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
        width: 120px;
        height: 42px;
        background-color: rgba(0,0,0,0.5);
        margin-top: 60px;
        margin-right: -42px;
        padding-top: 5px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    #feedback-tab:hover {
        background-color: rgba(0,0,0,0.4);
    }

和 HTML：

<div id="feedback">
    <div id="feedback-tab">Feedback</div>
</div>

【讨论】：

【解决方案2】：

试试这个：

#feedback {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 250px;
            margin-right: -3px;
            margin-bottom: -3px;
        }

另外，在我看来，不知道这个元素的父元素可能很难回答。

【讨论】：