CSS绝对定位元素在div内 [英] CSS absolute positioning elements inside a div

问题描述

我有一个 .wall div 和一些 .toy div s。我要安排 玩具 wall 。 float：left 属性已经为我做了。

I have a .wall div with a some .toy divs inside it. I want to arrange the toys inside the wall. float:left property has done it for me nicely.

现在的问题是我想添加 position：absolute 为玩具 div，以使它以后可拖动。

Now the problem is I want to add position:absolute for the toy divs to make it draggable later. How can I do this either via Javascript or via CSS?

应用位置：绝对，所有玩具将会来到墙的左上角，覆盖和隐藏对方。

Applying position:absolute, all toys will come to the top left corner of the wall overlying and hiding each other.

wall 的宽度和高度是常数，但 toy 的宽度和高度变量， toy divs的数量是动态的，随着数量的增加 玩具需要排列。

The width and height of the wall is constant but the width and height of the toys is variable, also the number of toy divs is dynamic and as the number increases toys need to arrange as rows.

任何建议请注意，我不能避免使用 position：absolute 进行拖动。

Any suggessions will be helpful, please note the I can not avoid the use of position:absolute for dragging.

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

这是JSBin的代码。

推荐答案

http://moveit.canassa.com/cartao/4/

http://moveit.canassa.com/cartao/4/

链接现已中断，但此处为jsFiddle，显示我在说什么：

The link is now broken but here is a jsFiddle that shows what I am talking about:

http ：//jsfiddle.net/canassa/Z9N3L/

toydiv正在使用绝对位置：

The "toy" div is using a position absolute:

.toy{
    width: 100px;
    height: 25px;
    position: absolute;
    z-index: 0;
}

位置绝对的问题是玩具将相对于页面不是墙容器，为了解决你必须使墙容器相对：

The problem with the position absolute is that the toy will be relative to page and not the "wall" container, in order to fix that you must make the wall container relative:

#wall{
    position: relative;
    overflow: hidden;
}

overflow：hidden也是一个很好的技巧。

The overflow:hidden is also a nice trick that I found. It makes the draggable objects go "under" the wall container.

没有什么大秘密可以使用jQuery来进行拖拽：

There is no big secret to make it draggable, using jQuery:

// Creates a toy div inside the wall
$(MV.wallId).append('<div class="toy" id="' + this.getId() + '"></div>');

box = this.getBox(); // return the "toy" that I've just created.
$('#' + this.getId()).draggable();  // make it draggable

这篇关于CSS绝对定位元素在div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！