MediaWiki中页面标题旁边图像的绝对定位答案

【问题标题】：Absolute positioning of an image next to page title in MediaWikiMediaWiki中页面标题旁边图像的绝对定位
【发布时间】：2015-01-26 12:05:56
【问题描述】：

如何使用 wikicode 和 css 对 MediaWiki 文章中的元素进行绝对定位（即相对于浏览器窗口）？

我需要做的是在页眉区域的空白处放置一些图标。例如，在我的电影 wiki 中，在“星际迷航”的文章中，我想在上面放一个星际迷航标志，作为第二个标志，在 wiki 的标志旁边，给人一种我们在一个子站点中的印象wiki，链接到该子站点的主页，即星际迷航门户。等等;每组电影都会有不同的标志（X档案、星球大战等）。所以这必须用一个简单的模板来完成，而不是接触皮肤（顺便说一句，就是 Vector）。

我试过了

<div style="
position: absolute;
top: 0px;
left: 0px;
z-index: 100;>{{logo}}</div>

但这个绝对位置将徽标定位到内容区域的左上角，不是浏览器窗口！

我也尝试将所有这些放在其他容器 div 中，并进行所有可能的定位和显示，但似乎无论如何我都无法离开内容区域。

所以我找到的解决方法是将top 更改为-150px;，以便徽标可以到达所需的位置。但由于这实际上是相对于内容区域，如果一篇文章的标题太大而分成两行，那么徽标会出现在同样移动的内容区域之后的较低位置。

我的猜测是 MediaWiki 使用某种代码使内容区域充当浏览器窗口或其他东西。如果是这种情况，有没有办法覆盖它？可以用 LocalSettings.php 开关吗？

【问题讨论】：

您可以编辑标记或其他内容，以避免绝对定位元素。您的解决方案正在中断，因为position: absolute 将绝对指向下一个相对定位的父级。
感谢您的快速回复！它为我指明了正确的方向！我意识到我应该查找父母的链条以寻找相对位置。我在 MediaWiki:Common.css 中找到了 .mw-body-content 类，然后将其设置为 position: static;，现在徽标的绝对定位似乎可以正常工作！我希望这种变化不会破坏皮肤的完整性。到目前为止，我没有注意到“静态”有任何问题。也许有 Vector 经验的人可以告诉我们是否可以。
尝试调整窗口大小以确保它看起来不错 :) 我将把我的评论变成答案，以便您将其标记为正确的。
调整大小时似乎没有问题（当然考虑到 Vector 皮肤本身不是移动优化的，所以标题标签在 800-900 像素宽度下无论如何都会中断
哈哈，笑死我了。我在一家拥有本地化网站的公司工作，德语的东西很快就坏了，甚至可能比希腊语还快；)

标签： css mediawiki

【解决方案1】：

一般来说，尽量避免position: absolute。随着窗口大小的调整，In 往往会中断。

您的尝试可能会失败，因为position: absolute 将绝对指向下一个相对定位的父级。向上查找特定元素的 DOM 树，找到位于 relative 的父元素。

【讨论】：

【解决方案2】：

在 MediaWiki 1.25 及更高版本中，您应该使用page indicators。

您需要的 wikitext 只是 <indicator name="logo">{{logo}}</indicator> 假设 {{logo}} 包含有问题的图像。

【讨论】：

谢谢@Nemo！我仍然低于 1.25，但我认为页面指示器是一个很棒的附加功能，让那些想要在他们的网站上添加额外徽标/图像的人的生活更轻松。如果你想把它放在标题的其他任何地方，我猜从指示器位置到绝对定位它会容易得多，因为指示器与顶部的距离是固定的，尽管页面标题是一行长还是几行。