Question

我正在尝试重新定位一个div - 可展开的面板，标题为'Why Bother'，所以它出现在你现在在显示屏中看到的位置（在底部）。但是在HTML中，我希望它出现在8个面板的顶部。

（这些面板位于内容区域的右侧。所以我这样做是为了保留当前网站的搜索引擎优化，这是我建立这个网站的人赚取99％的钱）。 / p>

我尝试过使用bottom：0;但这不适用于可扩展面板。有没有办法用CSS或JS做到这一点？

Answer 1

您可以通过绝对定位实现您想要的效果。我不知道在此之后下拉列表是否会起作用，但值得一试。

将此添加到现有的contentLeft css规则

.contentLeft {
    padding-bottom: 90px;
    position: relative;
}

将此添加到“特殊”div

.specialdropdownPanel {
    bottom: 20px;
    position: absolute;
}

Answer 2

如果您希望它出于SEO原因出现在顶部，那么您将不得不将其移至HTML代码的顶部。在DOM加载（使用JS或CSS）之后移动它将对它的SEO没有影响，因为SEO蜘蛛将以它在原始HTML中出现的方式读取DOM。

将其移至顶部后，您可以使用javascript将其移至底部，以使其显示在底部。

假设它是<div class="contentLeft"中带有类dropdownPanel的第一个div元素，您可以使用以下jQuery：

$(document).ready(function(){
    $('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});

这是一个有效的例子：

我注意到您的网站上有$禁用jQuery的快捷方式，因此请务必将其替换为jQuery：

jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');

Answer 3

使用jQuery执行此操作Example on fiddle

$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));