Search code examples
htmlcssalignmentcss-positionfixed

how to fix div button to right of screen?

I have a div button consisting two piece div and a parent div. The button must be in right of side on screen. But it does not stay still When changing screen resolution(Ex; 100% ,%75)

parent div css:

.help-parent{
    position: "absolute";
    top:"0px";
}

help icon css :

.help {
    position: absolute;
    color: rgb(243, 77, 0);
     display:inline-block;
    text-align: right;
    top: 50px;
    left: 1490px;
    height: 30px;
    z-index: 11;
    padding-top: 5px;
}

second div :

.help-button {
    position: absolute;
    text-align:left;
    top:50px;
    background-color:rgb(243, 77, 0);
    display:inline-block;
    width:200px;
    height:31px;
    z-index: 10;
    left:1500px;
}

When change screen resolution %100 to %75 it slides left;

enter image description here

I want the button to stay in the fixed position. How can I achive this?

I have modified according to answer of @greg_. I removed absolute from child divs and I have added vw 95 and absolute position to parent div. And div is fixed to righ. After I removed absoulute from child divs separated from each other. How can I combine child divs ?

enter image description here

Solution

  • The child divs should move with the parent, so remove any position css for the child divs. For the parent, try using viewport units (vh, vw). This will ensure that the position is always relative to the viewport. Parent div css:

    .help-parent {
position: absolute;
top:0;
left:95vw;
}

    1vw = 1% of the viewport width, so 95vw will keep your button at 95% the viewport width (far right). more info: https://developer.mozilla.org/en-US/docs/Web/CSS/length