CSS修复div自己元素的100%左右

Question

我有一个带有div的html/css.我希望它能拉出自己宽度的100%.现在它拉动了100%的屏幕.

从长远来看,我将在顶部添加一个CSS动画.

https://jsfiddle.net/5L7a5pfr/

HTML

<div class="test left">
testing something
</div>

CSS

.test {
  position: fixed;
  background: green;
  color: #fff;
  top: 0;
  left: 0;
}

.left {
  left: -100%;
}

Answer 1

您可以使用 transform: translateX(-100%)

.test {
  position: fixed;
  background: green;
  color: #fff;
  top: 0;
  left: 0;
  margin-left: 50%;
}
.move {
  top: 25px;
  transform: translateX(-100%);
}

<div class="test left">testing something</div>
<div class="test left move">Move 100% left of its own width</div>