html - 使用 CSS 将 WordPress 小部件移动到不同的区域

Question

我有一个网站即将达到流量里程碑。当我们为第 100 万名访问者倒计时时，我认为将我的统计小部件从右侧边栏移到网站标题元素的一 Angular 会很有趣。

到目前为止，我已经设法使用此 CSS 将小部件移出侧边菜单...但我真的很难弄清楚如何将此元素放入另一个 div .

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

这会将小部件弹出侧边栏，并使其始终悬停在 Angular 落。整洁...

不过，我的目标是将那个小部件移到这个位置

正在关注 this guide from the W3 Schools page ，我试图将小部件嵌套到我希望它进入的 div 中(称为 header.site-header)

这是我希望它进入的元素:

如果我设置它的绝对位置并调整大小，我可以将它推到我想要它去的地方，但这对平板电脑或手机来说看起来不太好。

#blog-stats-2 {
position: absolute;
   top: 75px;
   right:5px;
    width: 300px;
    border: 3px solid #73AD21;
    z-index:5;
}

在 site-header div 的 Angular 落里是否缺少任何关键字？

Answer 1

在使用 position: absolute; 之前，您需要先将点击计数器移动到 header HTML 中，否则它根本无法工作。尝试这样的事情。

您需要将其处理到您的 HTML 代码中。

<header class="site-header">

    <div id="blog-stats-2">

        <!-- code here -->

    </div>

</header>

然后你的 CSS 就像这样。

header.site-header {
  position: relative;
}

#blog-stats-2 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 123;
}

它所做的是将您的点击计数器移动到标题部分并将其绝对定位到标题的右下角。在父容器上使用 position: relative; 并在子元素上使用 position: absolute; 将确保 top、right、bottom 和 left 属性始终相对于父位置。

对于移动设备，您需要使用 media queries 进一步更改此设置 以确保它很好地位于页眉内。

@media screen and (max-width: 768px) {

  #blog-stats-2 {
    left: 10px;
    right: auto;
    bottom: 10px;
  }

}