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

Question

我有一个即将达到交通里程碑的网站。当我们倒数第100位访问者时，我认为从右侧边栏移动我的统计数据小部件并将其嵌套在我的网站标题元素的角落会很有趣。

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

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

这会将小部件从侧边栏中弹出，并使其始终位于角落。整齐...

我的目标是将小部件移动到这个位置

关注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的角落？

Answer 1

在使用position: absolute;之前，您需要首先将点击计数器移到标题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;
  }

}