英文:
Fixed position but moves with container
问题
我有一个可拖动的容器和一些可拖动的项目在里面。问题是：当我拖动（移动）容器时，我希望项目随容器一起移动。我的容器是绝对定位的，我的项目是固定定位的。（项目相对定位会引起一些问题，这就是为什么我对项目使用固定定位的原因）。
示例代码：
<div class="container-fluid area draggable ui-widget-content ui-draggable ui-draggable-handle" style="left: 714px; top: 194px;">
<div class="toolbar-item draggable ui-widget-content ui-draggable ui-draggable-handle toolbar-item-out" id="i1_num1" style="color: red; position: fixed !important; top: 584.98px; left: 910.492px;"> 项目 2 </div>
<div class="toolbar-item draggable ui-widget-content ui-draggable ui-draggable-handle toolbar-item-out" id="i1_num0" style="color: red; position: fixed !important; top: 346.992px; left: 845.492px;"> 项目 2 </div>
</div>
这个能解决吗？
注意：“area”类中有“position: absolute !important”。
英文:
I have a draggable container and some draggable items in it. The deal is: I want items to move with container when I drag (move around) the container. My container is absolute positioned and my items are fixed positioned. (Relative position for items causing some problems, that's why I'm using fixed position for items).
Example code:
<div class="container-fluid area draggable ui-widget-content ui-draggable ui-draggable-handle" style="left: 714px; top: 194px;">
<div class="toolbar-item draggable ui-widget-content ui-draggable ui-draggable-handle toolbar-item-out" id="i1_num1" style="color: red; position: fixed !important; top: 584.98px; left: 910.492px;"> item 2 </div>
<div class="toolbar-item draggable ui-widget-content ui-draggable ui-draggable-handle toolbar-item-out" id="i1_num0" style="color: red; position: fixed !important; top: 346.992px; left: 845.492px;"> item 2 </div>
</div>
Is this possible to solve this?
Note: "area" class has "position: absolute !important" in it.
答案1
得分: 0
我解决了。感谢Benjamin Rae的评论。
显然，有两种解决方法。
第一种方法
是将您的父元素和子元素都设置为position: absolute;。我不知道为什么我没有想到这一点，但事实就是这么简单。
第二种方法
是将您的子元素的position: fixed;更改为position: sticky;。然后将overflow: auto;添加到您的父元素。
英文:
I solved it. Thanks to Benjamin Rae for the comment.
Apparently there is 2 solutions for this.
First way
is making both your parent and child position: absolute;. I dont know how didn't I thought about that but it was simple as that.
Second Way
is turning your child position: fixed; to position: sticky;. Then you'll add overflow: auto; to your parent.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论