如何将一个元素与另一个元素完全放在相同的可见位置？答案

【问题标题】：How to place one element exactly to the same visible position, as another?如何将一个元素与另一个元素完全放在相同的可见位置？
【发布时间】：2010-07-21 14:11:57
【问题描述】：

我有两个元素“src”和“dest”

“src”和“dest”在不同的DOM节点中，不能有相同的父节点。

我需要将“src”元素放在与“dest”相同的可见位置。

“src”元素的大小也必须与“dest”相同。

当“src”和“dest”具有相同的父级时，我有以下案例代码：

src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());

// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();

不幸的是，它不起作用。 "src" 元素在底部和左侧有位移，为此我找不到原因。

也许，我做错了什么……

两种情况如何正确处理？

“src”和“dest”具有相同的祖父母
“src”和“dest”没有相同的父级。也许grand-grand-grand-parent是两者的共同点。

更新：

我已经安排了一个简单的 HMTL 文档，它对一个元素与另一个元素进行了简单的视觉交换：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div>
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>

它不能正常工作。在“交换”之后，“src”元素在大约 30 像素处向左上方向发生了奇怪的位移。

如果我觉得有意义的话，我使用的是最新版本的 Safari 5。

更新 2：

不幸的是，这也不起作用。我更新了我的例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        div {
            margin: 0;
            padding: 0;
        }
        .holder {
            position: relative;
            top: 40pt;
            left: 40pt;
            border: black solid thin;
        }
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.css("position", "absolute");
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div class="holder">
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>

【问题讨论】：

见stackoverflow.com/questions/683339/…

标签： javascript jquery html css positioning

【解决方案1】：

我在这里测试过：http://jsfiddle.net/YEzWj/1/

使用您的第二个示例使您的 CSS 如下所示：

div { 
    position:relative;
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute;
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

编辑：在玩了一些之后，它在所有情况下都不起作用。我决定更改javascript。注意：我的示例在 holder 中切换 src 和 dest 的显示，使 holder 与 dest 大小相同，因此边框显示在 dest 和 src 之外。

jQuery(function($){ 
    // Common items, to deal with 
    var src = $(".src"); 
    var dest = $(".dest");
    var holder=$(".holder");
    holder.width(dest.width()); 
    holder.height(dest.height());
    // Setup 
    src.hide(); 
    // Interaction 
    dest.click(function(){ 
        src.show();
        src.css("position", "absolute"); 
        src.width(dest.width()); 
        src.height(dest.height()); 
        src.offset(dest.offset()); 
        dest.hide();
     }); 
    src.click(function(){ 
        dest.show();
        src.hide(); 
    }); 

});

EDIT2：如果您希望 src.click() 事件在 src 单击时不返回到目标位置，请删除它。

【讨论】：

【解决方案2】：

您需要将dest 元素设为绝对，否则top 和left 偏移将不适用。

src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());

此外，p 和 body 等元素将具有默认样式表，具体取决于浏览器。所以尝试提供一个重置样式以使事情保持一致：

p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

【讨论】：

按照您的建议，我已经尝试过了，但这不起作用。请参阅我的问题的“更新 2”。你能让“更新2”工作吗？这并不像我想的那么简单......

【解决方案3】：

您可以调用offset function 来设置偏移量并正确处理不同的父母，如下所示：

dest.offset(src.offset());

【讨论】：