有没有办法让 HTML 元素溢出:滚动 DIV 始终保留在其他元素之上?

我知道标题很糟糕，我不知道如何解释它，但你可以在这里看到问题：https://jsfiddle.net/qwwhzzc3/8/

如果您拖动其中任何一行，您可以将其拉到拖放目标(标记为Test(，拖放交互有效(两个项目都会变成绿色(，但它仍然"在"div 内部，可拖动的行出现在放置目标下方，而它应该在上面。

CSS 规则的问题是：

.divTable{
display: table;
position: static;
z-index:1000;
width: 100%;
}
.divTableRow {
display: table-row;
position: inherit;
z-index:1000;
background-color:#fff;
}
.container {
width: 100%;
height: 500px;
overflow: scroll;
}

我尝试过弄乱所有位置的变化来让它工作，但我挠头。如果我做一些像绝对这样的事情，造型就会被毁掉。相对和静态不执行任何操作。有没有办法将该行从滚动容器中"拉出"，以便它可以成为屏幕上最顶层的元素？

E：我知道这是由溢出引起的：滚动，我想保留它并找到一些解决方法，以便我可以同时拥有这两种行为

问题出在.container类上设置overflow: scroll。设置该规则时，您可以将其设置为隐藏从容器流出的任何内容并导致容器滚动。这是您更新的小提琴，显示了我认为您想要的，而无需滚动溢出：

JS小提琴

所以我的建议是将分页添加到表格而不是滚动。然后，您仍然可以设置静态高度，并允许拖动的项目显示在不同容器中的其他项目之上。

编辑(代码段更新，JSFIDDLE 也 https://jsfiddle.net/qwwhzzc3/7/

您的问题似乎是z-index的问题，您可以在拖动元素时设置它：

target.style.zindex = '1000'

结束编辑

你可以看看position:sticky;及其javascript polyfill。( 请参阅本文以进一步挖掘 https://css-tricks.com/position-sticky-2/(

纯 CSS 示例：

const startPos = { x: 0, y: 0 }
const moveListener = e => {
const target = e.target
const x = (parseFloat(target.getAttribute('data-x')) || 0)
const y = (parseFloat(target.getAttribute('data-y')) || 0)
const transX = x + e.dx
const transY = y + e.dy
target.style.webkitTransition = '-webkit-transform 0ms'
target.style.transition = 'transform 0ms'
target.style.webkitTransform = `translate(${transX}px, ${transY}px`
target.style.transform = `translate(${transX}px, ${transY}px`
target.setAttribute('data-x', transX)
target.setAttribute('data-y', transY)
}
const dragdrop = () => {
	interact('.draggable')
.on('dragstart', e => {
	const target = e.target
startPos.x = parseFloat(target.getAttribute('data-x')) || 0
startPos.y = parseFloat(target.getAttribute('data-y')) || 0
})
.draggable({
inertia: false,
autoScroll: true,
onmove: moveListener,
onend: e => {
	const target = e.target
target.style.webkitTransition = '-webkit-transform 333ms'
target.style.transition = 'transform 333ms'
target.style.webkitTransform = `translate(${startPos.x}px, ${startPos.y}px`
target.style.transform = `translate(${startPos.x}px, ${startPos.y}px`
target.style.zindex = '1000'
target.setAttribute('data-x', startPos.x);
target.setAttribute('data-y', startPos.y);
}
})
interact('.dropRow').dropzone({
accept: '.draggable',
overlap: 0.7,
ondragenter: e => {
e.target.classList.add('drop-target')
e.relatedTarget.classList.add('drop-target')
},
ondragleave: e => {
e.target.classList.remove('drop-target')
e.relatedTarget.classList.remove('drop-target')
},
ondrop: e => {
e.target.classList.remove('drop-target')
e.relatedTarget.classList.remove('drop-target')
}
})
}
dragdrop()

.divTable{
display: table;
position: static;
z-index:1000;
	width: 100%;
}
.divTableRow {
display: table-row;
position: inherit;
z-index:1000;
background-color:#fff;
}
.sticky .header {
position:sticky;
top:-2px;
}
.divTableHeading {
	background-color: #fff;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #ddd;
	display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
	background-color: #fff;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #fff;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
.header {
background-color:#ccc!important;
}
.container {
width: 100%;
height: 500px;
overflow: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<div class='container'>
<div class="divTable" >
<div class="divTableBody">
<div class="divTableRow sticky">
<div class="divTableCell header">Name</div>
<div class="divTableCell header">Status</div>
<div class="divTableCell header">Location</div>
<div class="divTableCell header">Time On Status</div>
<div class="divTableCell header">Weekly Hours</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
<div class="divTableRow draggable">
<div class="divTableCell">Bob</div>
<div class="divTableCell">Happy</div>
<div class="divTableCell">California</div>
<div class="divTableCell">10:00</div>
<div class="divTableCell">30:00</div>
</div>
</div>
</div>
</div>
<div>
<div class='divTable'>
<div class='divTableBody'>
<div class='divTableRow'>
<div class='divTableCell dropRow'>
<span>Test</span>
</div>
</div>    
</div>
</div>
</div>

你的小提琴更新 https://jsfiddle.net/qwwhzzc3/1/

您不能在元素上设置position: absolute;以在拖动元素时将其从父元素的包含中拉出吗？当您拖动行时，它将从表中删除该行(折叠行的垂直空间(，但这实际上可能是一个功能，具体取决于您要实现的目标。

在这种情况下，我创建了一个修改的小提琴，它临时插入一个占位符元素以在拖动时保持表格形状;删除它将是微不足道的。

唯一有点黑客的部分是临时使用父(表的(clientWidth 在拖动行时在行上设置显式宽度，因为当行绝对定位时，它不会再从表中获取大小信息。

相关内容

最新更新

热门标签：