How to make a div fixed on the same position, no matter what screen size-CodePudding

I have the following problem: I want to put two bars, which got a either green or blue filling, in the bottom right. The problem is that those bars are not staying in the place they should. I want to fix them at the same position, no matter what screen size. As you can see, here they are out of the screen

Here is the CSS-Styling HTML

.element-1 {
  writing-mode: tb-rl;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 10%;
  height: 20px;
  position: fixed;
  margin-top: 38.5%;
  margin-left: 75.5%;
}

.element-2 {
  writing-mode: tb-rl;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 10%;
  height: 20px;
  position: fixed;
  margin-top: 38.5%;
  margin-left: 91.7%;
}

.meter {
  background: rgba(65, 60, 60, 0.39);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  box-shadow: inset 0 -1px 1px rgb(184, 45, 45);
  display: block;
  top: 8%;
  width: 270px;
  height: 20px;
  margin-bottom: 10px;
  padding: 5px;
  margin-left: 10px;
  position: absolute;
}

.meter>span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #2bc253;
  background-image: linear-gradient(to bottom, #0ff, #1e90ff);
  box-shadow: inset 0 2px 9px rgba(51, 48, 48, 0.3) inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: width 2s ease-out;
}

<div >
  <ul>
    <li>
      <div >
        <span data-progress="0" style="width:0;" id="bar-hunger"></span>
      </div>
    </li>
    <li>
      <div >
        <span data-progress="0" style="width:0;" id="bar-thirst"></span>
      </div>
    </li>
  </ul>
</div>

CodePudding user response：

position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;

CodePudding user response：

.element-1 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 75.5%;
    }
    .element-2 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 91.7%;
    }

CodePudding user response：

To make a div fixed position, use position: fixed;

It will work in all browser except IE6 and some mobile devices.

.element {
    position: fixed;
    bottom: 0;
    width: 100%;
}

CodePudding user response：

If you use position: fixed and want a placement at or close to the right bottom corner, you should not use any top, left, margin-top or margin-left settings.

Instead use bottom: 0 and right: xx, where for XX you can use a pixel or percentage value (percentage will be better for responsive placement). Plus width and height for those bars, also in pixel or percent, when in percent, maybe with a min-width as shown below.

An example:

.bar {
  position: fixed;
  bottom: 0;
  width: 2%;
  min-width: 10px;
  height: 20%;
  border-radius: 5px 5px 0 0;
}

.bar1 {
  right: 10%;
  background-color: orange;
}

.bar2 {
  right: 20%;
  background-color: blue;
}

<div ></div>
<div ></div>

CodePudding user response：

Just use position as fixed. that will make them fix there. Wait i am updating solution

.element-1 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 75.5%;
    }
    .element-2 {
        position: fixed;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform:rotate(90deg);
        transform: rotate(90deg);
        width:10%;
        height:20px;
        position: fixed;
        margin-top: 38.5%;
        margin-left: 91.7%;
    }
.meter {
            background: rgba(65, 60, 60, 0.39);
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            box-shadow: inset 0 -1px 1px rgb(184, 45, 45);
            display: block;
            top: 8%;
            width: 270px;
            height: 20px;
            margin-bottom: 10px;
            padding: 5px;
            margin-left: 10px;
            position: absolute;
    }
    .meter > span {
        display: block;
        height: 100%;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background-color: #2bc253;
        background-image: linear-gradient(to bottom, #0ff, #1e90ff);
        box-shadow: inset 0 2px 9px rgba(51, 48, 48, 0.3) inset 0 -2px 6px rgba(0,0,0,0.4);
        overflow: hidden;
        transition: width 2s ease-out;
    }

<div >
        <ul>
            <li><div >
                <span data-progress="0" style="width:0;" id="bar-hunger"></span>
              </div></li>
              <li><div >
                <span data-progress="0" style="width:0;" id="bar-thirst"></span>
              </div></li>
        </ul>
    </div>