在JavaScript中移動放置div

我有一個我建立的功能（它現在是一種裸露的骨骼），但我無法找到如何移動該對象，當它擴展onMouseOver，因此它不會移動頁面上的其他人，這可能嗎？在JavaScript中移動放置div

function expandbox(x) { 
    x.style.height = "100px"; 
    x.style.width = "100px"; 
} 

function returnbox(x) { 
    x.style.height = "80px"; 
    x.style.width = "80px"; 
}

來源

2013-04-16 RyanIndustries8

爲了防止其移動的其他元素，設置它的位置是絕對的，然後分配一個z-索引。 – BenM

使相對容器內的元素位置相對，然後更改其尺寸。

確保給它更高的Z指數。
與style的left,right,top,bottom屬性一起使用。

來源

2013-04-16 07:34:19 gdoron

它不需要在一個相對容器中*它只需要是'position：relative'本身。 – xec

@xec，你可能想[閱讀此]（http://css-tricks.com/absolute-positioning-inside-relative-positioning/）。 – gdoron

但是我們並沒有試圖移動一個**完全定位的元素，我們試圖移動一個相對**定位的元素。 – xec

如果要將元素保留在文檔流中，請將其設置爲position: relative並使用top和left將其移動，這將與元素的起始位置相關。

我將使用相同類型的你做的功能，以證明：

function moveBox(x) { 
    x.style.position = "relative"; 
    // move 20px down and 10px left from original position 
    x.style.top = "20px"; 
    x.style.left = "-10px"; 
}

如果你想刪除文件從流動箱（以下元素不會被它的存在而受影響）設置其位置改爲absolute。頂部和左值將相對於它的最接近定位的祖先（或<body>如果沒有，如我在下面的評論假設）

function moveBox(x) { 
    x.style.position = "absolute"; 
    // position box 20px from top of body 
    x.style.top = "20px"; 
    // and 10px from the left 
    x.style.left = "10px"; 
}

的元件被認爲是「定位」，如果它有一個比static（默認情況下，read more here）其他值，所以如果你想要控制的絕對定位的元素是相對的，你可以給一個容器元素position: relative

來源

2013-04-16 10:51:39 xec

優秀的答案，+1。 – gdoron

在JavaScript中移動放置div

回答

相關問題