且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS绝对定位元素在div内

更新时间:2022-06-22 03:30:17

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