CODEWITHSUNDEEP
htmlcsscss-position
Suhail Gupta
Suhail Gupta

Reputation: 23216

Why doesn't left:0 work here?

I was trying to make a sticky div inside the body, that has css like:

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

It works fine on my screen but on a device with a smaller screen, the sticky div vanishes. I know the reason. I have given margin-left as -107px. But when I try left:0, it doesn't work. The div stays where it stays. What is the method to fix it?

Upvotes: 1

Views: 76

Answers (2)

user5881566
user5881566

Reputation:

change this code with your original code...

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

hope it will help...

Upvotes: 0

Tamil Selvan C
Tamil Selvan C

Reputation: 20199

Remove margin-left and use left: -9%; instead

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

Upvotes: 1

Related Questions