Question

我最近一直在研究基于网络的小型网格类型对象。我想要做的是添加某种滑块，以便您可以拖动它并动态更改列的宽度。目前，这只是每列右上角的垂直条带。

我的目标是让这个滑块溢出父对象及其兄弟姐妹。我已经搜索了解决方案并试了一下。没有多少聪明的CSS位置和z-index有效。

相反，滑块的一半被从视图中剪切掉，无法与之交互。

这就是结果应该是这样的： app result image

正如您所看到的那样，红色条带位于每列的中间位置。

＆＃13;

    .wgrid_col{
        font-family: Arial;
    	width: 100px;
    	float:left;
    	position: relative !important;
        background: rgb(220, 220, 220);
    	overflow:visible !important;
    	z-index:1;
    }
    
    .colSizeHandle{
    	background:red;
    	position:absolute !important;
    	z-index:2;
    	width:10px;
    	height:42px;
    	margin-left:95px;
    	cursor:col-resize;
    	top:0;
    }

＆＃13;

<div id="wgrid" style="min-width: 380px;">
    	<div id="ROWN" style="width: 70px;">
    		<div id="hdr_rown">
    		</div>
    	</div>
    	
    	<div id="col_A" class="wgrid_col">
    		<div class="wgrid_col_hdr">A</div>
    		<div class="colSizeHandle"></div>
    	</div>
    	
    	<div id="col_B" class="wgrid_col">
    		<div class="wgrid_col_hdr">B</div>
    		<div class="colSizeHandle"></div>
    	</div>
    	
    	<div id="col_C" class="wgrid_col">
    		<div class="wgrid_col_hdr">C</div>
    		<div class="colSizeHandle"></div>
    	</div>
    </div>

＆＃13;

我知道滑块出现在父元素前面的效果和父母的兄弟姐妹是可能的，我之前已经这样做了。但在这种情况下，我无法让它为我的生活而工作。任何帮助将不胜感激。

Answer 1

简单修复，只需从每个z-index中移除.wgrid_col：

＆＃13;

.wgrid_col{
        font-family: Arial;
    	width: 100px;
    	float:left;
    	position: relative !important;
        background: rgb(220, 220, 220);
    	overflow:visible !important;
    }
    
    .colSizeHandle{
    	background:red;
    	position:absolute !important;
    	z-index:2;
    	width:10px;
    	height:42px;
    	margin-left:95px;
    	cursor:col-resize;
    	top:0;
    }

＆＃13;

<div id="wgrid" style="min-width: 380px;">
    	<div id="ROWN" style="width: 70px;">
    		<div id="hdr_rown">
    		</div>
    	</div>
    	
    	<div id="col_A" class="wgrid_col">
    		<div class="wgrid_col_hdr">A</div>
    		<div class="colSizeHandle"></div>
    	</div>
    	
    	<div id="col_B" class="wgrid_col">
    		<div class="wgrid_col_hdr">B</div>
    		<div class="colSizeHandle"></div>
    	</div>
    	
    	<div id="col_C" class="wgrid_col">
    		<div class="wgrid_col_hdr">C</div>
    		<div class="colSizeHandle"></div>
    	</div>
    </div>

＆＃13;

当您在父元素上设置z-index时，的孩子永远不会大于z-index。您在z-index: 1上设置了.wgrid_col，colSizeHandle是colSizeHandle的父级。 z-index: 2有一个z-index: 1，但由于它的父母是fileName = fileName.substring(fileName.indexOf("/") + 1);而无法工作。

HTML列大小滑块

1 个答案: