使用CSS將WordPress小部件移動到不同區域

我有一個即將達到交通里程碑的站點。當我們倒數第一百萬位訪問者時，我認爲將我的統計數據部件從右側邊欄移動並將其嵌套在我的網站頭部元素的角落會很有趣。使用CSS將WordPress小部件移動到不同區域

到目前爲止，我已經設法使用這個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的角落任意關鍵字？

來源

2017-04-11 FoxDeploy

最終，最好在標題中添加一個小部件區域，並將小部件放置在那裏。嘗試通過CSS將某些內容從側欄移動到標題可以完成，但在很多情況下可能會產生副作用。特別是當您的網站響應時。 – hungerstar

這是託管的WordPress，所以我不能只添加一個函數或自定義的Widget區域，這將是很棒的:(@MichaelCoker，如果我添加相對於網站標題，我將如何修改小部件的CSS來把它推入頭部？ – FoxDeploy

在使用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; 
    } 

}

來源

2017-04-11 20:18:08

使用CSS將WordPress小部件移動到不同區域

回答

相關問題