html - 正确使用 margin 属性将 Logo 定位到右侧

Question

有html

<div class="wrapper" id="top">
  <div class="main-logo bg-yellow-niza">
    <img src="http://eurekavi.com/car/images/logo.png" alt=""></div>
</div>

和CSS

.wrapper {
  width: 100%;
  margin: 0 auto;
}

.main-logo {
  background: #707070;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 9999;
}

.main-logo img {
  text-align: right;
  margin: 0 auto;
  margin-top: 0;
  width: 100%;
}

它在屏幕中央正确显示 Logo ，但我想将其定位在右上角之前 200 像素处。

我试过修改 left: 0;和 right: 0; 值，但我无法在右外 Angular 之前找到 Logo 。

怎么做？

请看jsfiddle

Answer 1

改变这个:

.main-logo {
  background: #707070;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 9999;
}

为此:

.main-logo {
  background: #707070;
  height: 100px;
  width: 100px;
  right: 200px;
  position: absolute;
  z-index: 9999;
}

不同之处在于将“右”位置设置为 200 像素，删除“左:0；”并去除边距。