div問題html，css

我在我的html文件中有以下代碼，我在其中顯示兩個可點擊的區域，但它只讓我點擊一個。我可以看到兩者，但我只能點擊最後定義的那個。div問題html，css

<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"; 






    }

函數showt是使兩個對象都可見的函數。所以當這個函數被調用時，我可以看到button1和button2文本，但我無法與button1交互，button2工作正常。

任何想法？

來源

2011-05-12 user541597

你有jsFiddle的例子嗎？ – 2011-05-12 21:54:24

不是使用'padding-top'（和'padding-left'），而是使用'top'（和'left'）。

第二個div的填充與第一個div重疊，這就是爲什麼你不能點擊它。

來源

2011-05-12 22:02:08 kei

這個答案是正確的。 http://jsfiddle.net/6FTt9/ - @kei很好。頂部和左側就像填充頂部和填充左側一樣？有什麼不同？ – webdad3 2011-05-12 22:05:29

@Jeff。 'top'和'left'是用於定位的css屬性。當你把某些東西設置爲'position：{somethingotherthanstatic}'時，'top'和'left'會物理地移動該元素。 'padding- {direction}'用於在內容框和邊框之間應用空格。 – 2011-05-12 22:10:15

當您添加頂部或左側時，您實際上移動了div。使用填充，您只需在div內添加額外空間，從而使其「更胖」。我希望這是有道理的。 – kei 2011-05-12 22:10:44

你的第二個div元素與你的第一個div元素重疊，所以你不能點擊它。嘗試設置第二個div的背景顏色。你不會再看到第一個。

你不應該使用position：absolute，除非你真的需要它，並且還有其他更簡潔的方法來獲得這種佈局，但對於你的問題的一個快速解決方案是，如果你改變你的填充樣式到邊距，這樣間距不在你的div裏面，所以沒有重疊，你可以點擊你的元素。

來源

2011-05-12 22:08:33 Zsipgun

如果所討論的元素是'position：absolute'，它應該使用'top'和'left'屬性而不是'margin'。它會使用'margin-top'和'margin-left'，但只有元素會實際使用margin（因爲它超出了正常流程）。 – 2011-05-12 22:14:06

div問題html，css

回答

相關問題