为什么这个带有固定位置选择器的 div 无法更改其左侧属性

我有一个带有CSS选择器的HTML文件，称为 holder2 具有固定位置，我不明白为什么它不能改变其左属性，只要让我更改其顶级财产。如果我更改左属性值，则DIV不会更改位置。

#translucent {
  background-color: orange;
  opacity: 0.5;
}
.holder2 {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 180x;
}
.holder {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 190px;
}
.frame {
  width: 128px;
  height: 128px;
}
.bar {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 40px;
  border: 3px solid green;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>The opacity Property</h1>
  <div class="holder2">
    <img style="" src="http://gallery.raccoonfink.com/d/7003-2/alien-head-128x128.png">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="2">
    </div>
  </div>
  <div class="holder">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="1"></div>
  </div>
</body>
</html>

简单错字。

替换

left:180x;

left:180px;

只需将左：180x更改为holder2类中的180px即可。小错字错误。

#translucent {
  background-color: orange;
  opacity: 0.5;
}
.holder2 {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 180x;
}
.holder {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  border: 3px solid red;
  top: 70px;
  left: 190px;
}
.frame {
  width: 128px;
  height: 128px;
}
.bar {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 40px;
  border: 3px solid green;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>The opacity Property</h1>
  <div class="holder2">
    <img style="" src="http://gallery.raccoonfink.com/d/7003-2/alien-head-128x128.png">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="2">
    </div>
  </div>
  <div class="holder">
    <iframe class="frame" id="translucent"></iframe>
    <div class="bar" id="1"></div>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：