將元素隨機放入文檔背景中？

Question

我嘗試創建一個供個人使用的插件，它會隨機將雲放在我的網頁中。

讓我們看看我的想法是什么：

我用我所有的雲創建了一個圖像。

在我的CSS中，我創建了一個名為.cloud的通用類，它應用於所有雲元素和四個類.cloud_1 .cloud_2 .cloud_3 .cloud_4，用於我希望放在文檔中的每個雲元素。

這是我使用的CSS類：

.cloud
{
    display: block;
    position: absolute;
    background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}

.cloud_1
{
    width: 800px;
    height: 350px;
    background-position: 0px 0px;
    z-index: 1;
}

.cloud_2
{
    width: 800px;
    height: 469px;
    background-position: 0px -350px;
    z-index: 2;
}

.cloud_3
{
    width: 800px;
    height: 405px;
    background-position: 0px -819px;
    z-index: 3;
}

.cloud_4
{
    width: 630px;
    height: 314px;
    background-position: 0px -1225px;
    z-index: 4;
}

另一方面，我使用jQuery放置生成並將我的雲隨機地放在我的文檔中，隨機上下左右。

我遇到的問題是，如果我將.cloud選擇器的位置設置為絕對，則超出文檔寬度的雲將激活水平滾動條。 如果我將其設置為固定，則在向下滾動時雲將連接到相同位置，依此類推。

什么是最好的解決方案，以使我的雲沒有水平滾動條而不是固定在同一位置？

---

額外信息

我忘了告訴你，雲將向右移動！

---

制作代碼示例

<div class="cloud cloud_3"></div>

和jQuery將添加樣式屬性：

<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>

此外，jQuery將更改左側css位置以便設置動畫

Answer 1

將所有雲放在帶有overflow: hidden的<div> ，並使其成為文檔的完整大小。 將該div設置為z-index: -1 ，使其位於內容的其余部分之后。

Answer 2

將雲放入包含div的overflow: hidden設置。 然后，當雲的left位置大於包含div的寬度時，將其向左移動，使其再次向右滾動。