Question

我试图在身体内部制作一个粘性div，其中css就像：

.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停留在它所在的位置。修复它的方法是什么？

Answer 1

删除margin-left并使用left：-9％;代替

＆＃13;

.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);
}

＆＃13;

<div class="call-us-alert"></div>

＆＃13;

Answer 2

使用原始代码更改此代码...

.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);
}

希望它会有所帮助...

为什么不离开：0在这里工作？

2 个答案: