如何解决Telerik RadButton上传控件滚动时位置异常覆盖已选文件的问题

问题原因 #

Telerik RadAsyncUpload控件的Select Files按钮默认自带固定定位相关样式，而你将Upload按钮放在了同级独立的列容器中，二者没有共用同一个固定定位父容器，因此滚动页面时只有Select Files按钮保持固定，Upload按钮会跟随页面移动，遮挡下方已选文件列表。

解决方案 #

方案1（推荐）：将两个按钮放在同一个固定父容器中

给包裹两个按钮的row容器添加粘性定位样式，保证整行按钮同步固定在顶部：

<div class="container">
    <!-- 仅修改此行的style属性 -->
    <div class="row" style="padding: 10px 0; position: sticky; top: 0; background: #fff; z-index: 999;">
        <div class="col-lg-1" >
            <telerik:RadAsyncUpload RenderMode="Lightweight" 
                                    ID="RadUpload1" 
                                    runat="server" 
                                    MultipleFileSelection="Automatic" 
                                    ManualUpload="False" 
                                    DropZones=".DropZone1" 
                                    OnClientValidationFailed ="OnClientValidationFailed"
                                    PostbackTriggers="btnUpload"
                                    HideFileInput="False"
                                    UploadedFilesRendering="BelowFileInput"
                                    OnClientFilesUploaded="onClientFilesUploaded"
                                    OnClientFileUploading="onClientFileUploading">
                <Localization Select="Select files"></Localization>
            </telerik:RadAsyncUpload>
        </div>
        <div class="col-lg-2">
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Upload" ID="btnUpload" Enabled ="false"/>
        </div>
        <div class="col-lg-9"></div>
    </div>
    <div class="DropZone1">
        <p>Drop Files Here</p>
    </div>
</div>

样式参数说明：

• position: sticky：实现元素滚动到指定位置时吸附固定的效果，和RadAsyncUpload自带的固定逻辑兼容
• top: 0：指定吸附位置为视口顶部，若页面有固定头部导航，可调整为对应导航的高度值，比如top: 60px
• background: #fff：设置不透明背景，避免滚动时下方内容穿透显示
• z-index: 999：提高层级，保证按钮不会被其他页面元素遮挡

方案2：单独固定Upload按钮

如果不需要整行固定，可单独给Upload按钮的外层列容器添加定位样式：

<div class="col-lg-2" style="position: sticky; top: 0; z-index: 999;">
    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Upload" ID="btnUpload" Enabled ="false"/>
</div>

内容的提问来源于stack exchange，提问作者Sphen Janicek