Question

我和另外两个人在一个项目上进行实习。我们试图创建一个理想情况下看起来尽可能接近这个布局的HTML网页应用

我的朋友正在使用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;

}

Answer 1

首先纠正HTML代码中的一些错误：

你有一个doctype标签。
样式和脚本标记应位于head标记中。
您没有任何身体标签。
<div="topbar">应为<div id="topbar">

然后你有一些按预期工作的东西：http://jsfiddle.net/RgGdc/

重叠的div标签背景图像没有显示

1 个答案: