無論螢屏尺寸如何，如何使div固定在同一位置

我有以下問題：我想在右下角放置兩個填充綠色或藍色的條。問題是這些酒吧沒有留在他們應該呆的地方。無論螢屏尺寸如何，我都想將它們固定在同一位置。 如您所見，它們在螢屏外

這是 CSS 樣式 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 class="bars">
  <ul>
    <li>
      <div class="meter cadetblue element-1">
        <span data-progress="0" style="width:0;" id="bar-hunger"></span>
      </div>
    </li>
    <li>
      <div class="meter element-2">
        <span data-progress="0" style="width:0;" id="bar-thirst"></span>
      </div>
    </li>
  </ul>
</div>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

要使 div 固定位置，請使用position: fixed;

它適用于除 IE6 和一些移動設備之外的所有瀏覽器。

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

uj5u.com熱心網友回復：

如果您使用position: fixed并希望放置在右下角或靠近右下角，則不應使用任何 top、或設定。leftmargin-topmargin-left

而是使用bottom: 0and right: xx，對于 XX，您可以使用像素或百分比值（對于回應式放置，百分比會更好）。加上width和height對于那些條，也以像素或百分比為單位，當以百分比表示時，可能min-width如下所示。

一個例子：

.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 class="bar bar1"></div>
<div class="bar bar2"></div>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

只需使用固定位置。這將使他們在那里修復。等我更新解決方案

.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 class="bars">
        <ul>
            <li><div class="meter cadetblue element-1">
                <span data-progress="0" style="width:0;" id="bar-hunger"></span>
              </div></li>
              <li><div class="meter element-2">
                <span data-progress="0" style="width:0;" id="bar-thirst"></span>
              </div></li>
        </ul>
    </div>

標籤：html css

上一篇：在沒有相對/絕對定位的情況下使容器與其同級容器大小相同

下一篇：用div填充html表格單元格