重疊div標籤背景圖片不顯示

我正在與另外兩個傢伙一起實習項目。試圖建立一個HTML的Web應用程序，理想看起來接近此佈局儘可能重疊div標籤背景圖片不顯示

我的好友使用jQuery來創建可拖動和可調整大小的div標籤和我的工作的樣子。

此刻我正試圖在可拖動div標籤內創建一個新的div標籤。但是，新的div標籤中的文本與之前的div標籤文本重疊，並且新div的背景顏色未顯示。我一直在玩z指數無濟於事。

任何幫助，將不勝感激

<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<link rel="stylesheet" 
type="text/css" href="testcss.css" /> 
</head> 
<style> 
    #ipad { width: 1024; height: 768;} 
    #draggable { width: 150px; height: 768px; padding: 0.5em;} 
</style> 

    <script> 
    $(function() { 
     $("#draggable").draggable({ axis: "x" },{containment: "#ipad"}); 
    }); 
    </script> 



<div id="ipad"> 

<div id="draggable"class="ui-widget-content"> 
    <div="topbar"> 
    <p> topbar </p> 
    </div> 

    <p>Drag me around</p> 
</div> 

</div> 
</html>

這裏是CSS文件

body{ 
background-color:black; 


} 

div#ipad{ 
/* fallback */ 
    background-color: #2F2727; 
    background-image: url(images/radial_bg.png); 
    background-position: center center; 
    background-repeat: no-repeat; 

    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 

    /* Safari 4-5, Chrome 1-9 */ 
    /* Can't specify a percentage size? Laaaaaame. */ 
    background: -webkit-gradient(radial, center center, 0, center center, 460,    from(#1a82f7), to(#2F2727)); 

    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); 

    /* Opera cannot do radial gradients yet :( */ 

} 


div#draggable{ 
z-index:1; 
background-image: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0.08, rgb(110,110,110)), 
    color-stop(0.18, rgb(135,135,135)) 
    ); 
background-image: -moz-linear-gradient(
    center top, 
    rgb(110,110,110) 8%, 
    rgb(135,135,135) 18% 
    ); 
} 


div#topbar{ 
    margin-top:300px; 
    z-index:2; 

}

來源

2011-07-12 Stephen Domican

當你說了「新的div的背景顏色沒有顯示過」，這DIV你在說什麼，究竟？您實際上並沒有在#topbar上設置背景色（如果我設置了背景色，我會看到背景色很好，但我看不到您的漸變色，因爲我只有Internet Explorer在這裏工作...... ）哦，你的#topbar沒有正確設置id，這沒有幫助。 –

開始通過在HTML代碼糾正了一些錯誤：

您shold有一個DOCTYPE標籤。
樣式和腳本標籤應該位於head標籤中。
您沒有任何標籤。
<div="topbar">應該<div id="topbar">

然後你有一些如預期那樣工作：http://jsfiddle.net/RgGdc/

來源

2011-07-12 15:15:51 Guffa

Appologies我從那裏刪除了topbar顏色。我一直試圖讓topbar div標籤中的任何背景色設置顯示。 –

@Stephen Domican：這應該很簡單，現在你實際上已經有了一個帶'id =「topbar」'的div。 :) http://jsfiddle.net/RgGdc/1/ – Guffa

它現在工作歡呼聲 –

重疊div標籤背景圖片不顯示

回答

相關問題