javascript - div 中的 CSS 绝对定位元素

Question

我有一个 .wall div有一些.toy div在里面。我想安排 toy s inside the wall . float:left属性(property)为我做得很好。

现在的问题是我想添加 position:absolute对于 toy div 以使其稍后可拖动。如何通过 Javascript 或 CSS 执行此操作？

正在申请 position:absolute , 所有 toy s 会出现在 wall 的左上角相互叠加和隐藏。

wall 的宽度和高度是常数，但 toy 的宽度和高度s是可变的，也是toy的个数div 是动态的，随着数字的增加 toy s need to arrange as rows .

任何建议都会有所帮助，请注意我无法避免使用 position:absolute用于拖动。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <style>
  body{
   text-align:center;
  }
 .clearfix{
  clear:both;
 }
  .wall {
   border: 5px solid #cde;
  margin:auto;
  width:200px;
  padding:10px;
  }
 .toy{
  background-color: #BBCCEE;
  border:1px solid #8899BB;
  margin:5px;
  width: auto;
  padding:5px;
  float:left;
 }
 .tall{
  padding-top:10px;
 }
 </style>
 <script>
  $(document).ready(function() {
  $('.toy').each(function(index) {
   var position = $(this).offset();
   var prevPosition = $(this).prev().offset();
   $(this).css({
    //top: position.top,
    //left:position.left,
    //position:'absolute',
   });
  });
 });
 </script>
<div class='wall'>
 <div class='toy'>T1</div>
 <div class='toy'>T2</div>
 <div class='toy'>T3333333</div>
 <div class='toy'>T4</div>
 <div class='toy'>T5</div>
 <div class='toy tall'>T6</div>
 <div class='toy'>T7</div>
 <div class='toy'>T8</div>
 <div class='clearfix'></div>
</div>

Here is the code at JSBin .

Answer 1

添加

position:relative

到墙div