替代负边距

Question

我在寻找一种替代方法来使用负边距，因为我知道它们不被认为是“酷”，并且它们被认为是哈克。

我开始在WordPress一个新的网站，我需要将两个图像添加到每一页。图像必须链接，每个页面的链接必须不同，因此我无法将图像添加到菜单或小部件。

当我将它们添加到他们显示标题下方的页面的内容，但我需要他们的头内。我已经放置在它们像这样：

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

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

然后我加入开发者工具负的margin-top和他们显示我需要他们的头里面，但我不知道是否有使用替代负利润率。

此图显示了我正在做的事情。英国国旗具有负余量，但中国国旗显示在标题下方，因为它只有定位，它将其放置在同一个div内，而不是位于页面的顶部。

Working Sample

Answer 1

没有错切缘阴性，如果使用得当。这完全是关于使用正确的工具来完成这项工作。在这种情况下，你做错了。

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

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％的广移动导航旗容器中的容器。