2016-07-15 3 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 может затруднить ответ, на мой взгляд.

Смежные вопросы