Javascript div发布html、css

我的html文件中有以下代码，我在其中显示两个可单击的区域，一个在另一个之上，但是它只允许我单击一个。我可以看到两者，但只能单击最后定义的一个

<div style="visibility:hidden; position:absolute; padding-left:360px; padding-top:80px; float:left" id="colors">

<h2 style = "cursor:pointer" onclick="changecolor()">button1</h2>

</div>

<div style="visibility:hidden; position:absolute; padding-left:360px; padding-top:410px; float:left" id="stylescroll">

<h2 style="cursor:pointer" onclick="changedesign()">button2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>

</div>



function showt(){

        removeall();





        var hide = document.getElementById("center");
        hide.style.backgroundImage = "url(tshirts.jpg)";


        var shirt = document.getElementById("shirt");
        shirt.style.visibility = "visible";

        var move = document.getElementById("shirtmove");
        move.style.visibility = "visible";



        var logo = document.getElementById("advisory");
        logo.style.visibility = "visible";

        var button1 = document.getElementById("stylescroll");
        button1.style.visibility = "visible";

    var button = document.getElementById("colors");
        button.style.visibility = "visible";






    }

按钮1
按钮2
函数showt（）{
removeall（）；
var hide=document.getElementById（“中心”）；
hide.style.backgroundImage=“url（tshirts.jpg）”；
var shirt=document.getElementById（“shirt”）；
shirt.style.visibility=“可见”；
var move=document.getElementById（“shirtmove”）；
move.style.visibility=“可见”；
var logo=document.getElementById（“咨询”）；
logo.style.visibility=“可见”；
var button1=document.getElementById（“样式滚动”）；
button1.style.visibility=“可见”；
var按钮=document.getElementById（“颜色”）；
button.style.visibility=“可见”；
}

函数showt是使两个对象都可见的函数。因此，当调用该函数时，我可以看到button1和button2文本，但我无法与button1交互，button2工作正常

---

有什么想法吗？

不要使用“padding top”（和“padding left”），只要使用“top”（和“left”）

---

第二个div的padding与第一个div重叠，因此不能单击它。

使用“padding top”（和“padding left”）而不是“padding top”（和“padding left”），只需使用“top”（和“left”）

---

第二个div的填充与第一个div重叠，因此不能单击它。

第二个div元素与第一个div元素重叠，因此不能单击它。尝试将背景色设置为第二个div。您将不再看到第一个div

---

你不应该使用position:absolute，除非你真的需要它，还有其他更干净的方法来获得这种布局，但解决问题的一个快速方法是，如果你将填充样式更改为边距，那么间距就不在div内，因此没有重叠，您可以单击您的元素。

第二个div元素与第一个div元素重叠，因此无法单击它。尝试将背景色设置为第二个div。您将不再看到第一个div

---

你不应该使用position:absolute，除非你真的需要它，还有其他更干净的方法来获得这种布局，但解决问题的一个快速方法是，如果你将填充样式更改为边距，那么间距就不在div内，因此没有重叠，您可以单击您的元素。

您有JSFIDLE示例吗？您有JSFIDLE示例吗？这个答案是正确的。-@凯：干得好。顶部和左侧就像填充顶部和填充左侧一样吗？“有什么区别吗？”杰夫

top

和

left

是用于定位的css属性。当您将某物设置为

位置：{somethingotherthantstatic}

时，

顶部

和

左侧

将实际移动元素

padding-{direction}

用于在内容框和边框框之间应用空格。当您添加top或left时，实际上是在移动div。使用padding，您只是在div内添加额外的空格，从而使其“更胖”。我希望这是有道理的。这个答案是正确的@凯：干得好。顶部和左侧就像填充顶部和填充左侧一样吗？“有什么区别吗？”杰夫

top

和

left

是用于定位的css属性。当您将某物设置为

位置：{somethingotherthantstatic}

时，

顶部

和

左侧

将实际移动元素

padding-{direction}

用于在内容框和边框框之间应用空格。当您添加top或left时，实际上是在移动div。使用padding，您只是在div内添加额外的空格，从而使其“更胖”。我希望这是有意义的。如果所讨论的元素是

position:absolute

，那么应该使用

top

和

left

属性，而不是

margin

。使用

页边距顶部

和

页边距左侧

是可行的，但只有元素会实际使用页边距（因为它超出了正常流程）。如果所讨论的元素是

位置：绝对

，那么应该使用

顶部

和

页边距左侧

属性，而不是

页边距

。可以使用

页边距顶部

和

页边距左侧

，但只有元素会实际使用页边距（因为它超出了正常流程）。