Question

我有一个我建立的功能（目前它是一种简单的骨头），但我无法找到如何移动对象，当它在onMouseOver上扩展时它不会移动页面上的其他人，这可能吗？

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

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

Answer 1

使元素位置相对于相对容器内部，然后更改它的尺寸。

确保给它更高的z-index 将其left,right,top,bottom属性style放置。

Answer 2

如果要将元素保留在文档流中，请将其设置为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

在JavaScript中移动展示位置div

2 个答案: