重叠的 div（是的，再次！）答案

【问题标题】：Overlapping div's (yes, again!)重叠的 div（是的，再次！）
【发布时间】：2013-10-16 20:17:19
【问题描述】：

我正在构建一个产品配置器。我需要 2 张图像重叠。想象一个炉子，炉子本身是一个图像，而旋钮/手柄是另一个图像。

两张图片大小相同，因此它们应该“完全”重叠。两个图像都在一个 div 内，并且基于一个返回 div.append(Child) 的函数（如果这很重要）。

我已经尝试了我在网上找到的所有方法，做我认为正确的事情，但显然行不通。如果我调用 1 个 div 然后另一个（img1img2），它们不会重叠。如果我在第一个 div 中调用第二个图像，它不会显示。我究竟做错了什么？！ html:

    <input type="button" onclick="create_img(); " value="Create image" />
    <div class="imageWrapper">
    <div id="pop" >
    <div id="pop2" >
    </div>
    </div>
    </div>

JS：

    function create_img(){


var im=""
var div = document.getElementById("pop");
var hold= document.createElement("img");

if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12" ){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;}
else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13" ){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;}
else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

hold.src=im;
hold.border=0;
div.appendChild(hold);

var im2=""
var div = document.getElementById("pop2");
var hold= document.createElement("img");

if (document.Lacanche_Configurator.Finishes.value=="1" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;}
else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

hold.src=im2;
hold.border=0;
div.appendChild(hold);
}

CSS：

    .imageWrapper{
            position: relative;
            top:0;
            left:0;
            width:160px;
            }


            #pop {
            background:transparent;
            }


            #pop2 {
            position: absolute;
            left:0;
            top: -150px;
            background:transparent;

            }

我已经尝试了很多方法，不知道下一步该怎么做！

谢谢！

【问题讨论】：

标签： html overlay overlap

【解决方案1】：

如果您只需要堆叠 2 个图像，那么您应该能够使用单个 <IMG/> 标记来执行此操作。将<IMG/> 标签的CSS background-image 设置为炉子的图片。然后将<IMG/>标签的src属性设置为旋钮。

【讨论】：

谢谢大卫。我不确定我是否可以使用 img 标签，因为每个图像都是由一个函数创建的，但你的回答启发了我在函数本身中做同样的事情。它奏效了。

【解决方案2】：

所以，按照大卫的建议，对正确的语法进行更多研究，这就是我想出的。该函数根据列出的参数创建两个图像（im amd im2），然后将一个定义为 bg 图像，另一个定义为 src 图像。所以看起来我真的不需要 css 来解决这个特定的问题。

再次感谢大卫！让其他人为我设计，为我节省了很多时间、麻烦和金钱！

function create_img(){


                var im=""
                var div = document.getElementById("pop");
                var hold= document.createElement("img");

                if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12" ){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;}
                else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13" ){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;}
                else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

                var im2=""
                var div = document.getElementById("pop");
                var hold= document.createElement("img");

                if (document.Lacanche_Configurator.Finishes.value=="1" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;}
                else if (document.Lacanche_Configurator.Finishes.value=="2" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/nickel.png" ;}
                else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

                hold.src=im2;
                hold.border=0;
                div.appendChild(hold);
                div.style.backgroundImage = 'url("'+im+'")';


                }

【讨论】：