2016-07-15 183 views
1

我有一個當前位於屏幕左側的選項卡。我想要做的是將其移到右側,並將其向上移動一些。我會後我有什麼它位於左側:將頁面左側的標籤頁移動到右側

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> 
+0

您可以添加JSBin或鏈接的jsfiddle? – Zac

+0

https://jsfiddle.net/89fjamf8/ –

回答

0

我認爲這是你想要的。

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> 
0

試試這個:

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

而且,不知道這個元素的父母在我看來,nt很難回答。