2016-02-13 72 views
1

我試圖讓身體內部粘性DIV,有css像:爲什麼不離開:0在這裏工作?

.call-us-alert { 
    background-color: #FFB100; 
    border-radius: 4px; 
    height: 31px; 
    width: 19%; 
    top: 50%; 
    margin-left:-107px; 
    position: fixed; 
    z-index: 10; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
} 

它的工作原理我的屏幕上,但有一個小屏幕的設備上細,粘DIV消失。我知道原因。我已將margin-left設爲-107px。但是當我嘗試left:0時,它不起作用。該div保持它停留的位置。什麼是解決它的方法?

+0

刪除保證金左和使用'左: -9%;'而不是 –

+0

我根本不會使用保證金。使用左:-107px,無論如何你的元素已經修復。也很高興看到你想要在屏幕截圖上實現的結果。 – markoffden

回答

1

刪除空白左側和使用左側:-9%;而不是

.call-us-alert { 
 
    background-color: #FFB100; 
 
    border-radius: 4px; 
 
    height: 31px; 
 
    width: 19%; 
 
    top: 50%; 
 
    left: -9%; 
 
    position: fixed; 
 
    z-index: 10; 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
 
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
 
}
<div class="call-us-alert"></div>

0

改變這個代碼與原代碼...

.call-us-alert { 
    background-color: #FFB100; 
    border-radius: 4px; 
    height: 31px; 
    width: 19%; 
    top: 50%; 
    left:0; 
    position: relative; 
    z-index: 10; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75); 
} 

希望這將有助於...