为什么 left:0 在这里不起作用？

Question

我试图在 body 中制作一个粘性的 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%;相反

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

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

希望对您有所帮助...

为什么 left:0 在这里不起作用？

Why doesn't left:0 work here?

html

css

css-position