css - 负边距的替代方案

Question

我正在寻找使用负边距的替代方法，因为我知道它们不被认为“酷”，而且被认为是 hacky。

我要在 WordPress 中创建一个新站点，我需要向每个页面添加两个图像。必须链接图像，并且每个页面上的链接必须不同，因此我无法将图像添加到菜单或小部件。

当我将它们添加到页面内容时，它们显示在页眉下方，但我需要它们在页眉内。我把它们定位成这样:

.enflag{
  position:absolute;
  top:0;
  right:0;
}

.zhflag{
  position:absolute;
  top:1%;
  right:1%;
}

然后我在开发工具中添加了一个负边距顶部，它们显示在标题中我需要它们的地方，但我想知道是否有使用负边距的替代方法。

这张图片展示了我在做什么。英文旗帜有负边距，但中文旗帜显示在标题下方，因为它只是定位，将其放在同一个 div 内，而不是页面顶部。

Working Sample

Answer 1

如果使用得当，负边距没有错。这一切都是关于为工作使用正确的工具。在这种情况下，你做的有点不对。

首先，如果定位多个元素说你的标志在右上角，你希望能够轻松地添加/删除它们而不添加 CSS，所以将它们包装在一个绝对定位的容器中，而不是将每个标志定位在它自己的或 float 一个容器中如果合适的话，向右。

HTML

<div class="flag-container">
    <img class="alignright size-full wp-image-19 zhflag" src="http://rmbpay.com.au/tmp/wp-content/uploads/2016/11/Zh-Flag-s.png" alt="Chinese Language Button" width="50" height="35">
    <a href="http://rmbpay.com.au/tmp/"><img class="alignright size-full wp-image-18 enflag" src="http://rmbpay.com.au/tmp/wp-content/uploads/2016/11/british-flag-s.png" alt="English Language Button" width="50" height="35"></a>
</div>

CSS:

.flag-container{
    position: absolute;
    right: 0; 
    top: -65px;
}

并删除 .zhflag 和 .enflag 的所有规则，因为现在不需要它们了。

最好将标志容器移动到具有相对定位且 100% 宽度的导航的容器中，这样可以更好地分组并避免分层问题，尤其是在旧版浏览器中。