滚动时在右下角的 Master asp 页面中插入徽标不起作用：重叠答案

【问题标题】：Inserting logo in Master asp page at the bottom right corner does not work when scrolling: overlaps滚动时在右下角的 Master asp 页面中插入徽标不起作用：重叠
【发布时间】：2021-09-28 22:00:11
【问题描述】：

我有一个 asp.net 网络表单应用程序。

它包含一个母版页和一个 Web 表单。

我正在尝试在母版页的右下角插入一个徽标，它可以工作，但是当滚动徽标在页面正文上重叠时。

Web 表单 Default.aspx 在 contentplaceholder1 中包含一个 html 表。

在 Default.Master 中我尝试过如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="MyTool.Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="Content/MySite.css" />

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"  EnableCdn="true"> <%-- To retrieve the jQuery files from CDN we enable EnableCdn --%>
            <Scripts>
                <asp:ScriptReference Name="jquery" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="logo-img">
                <img id="myLogo" src="Images/myLogo.png" >
            </div>
        </div>
    </form>
</body>
</html>

在我的 MySite.css 文件中，我有以下类：

.logo-img {
    position: absolute; // also I have tried fixed and the same occurs
    right: 0px;
    bottom: 0px;
}

最初加载网页表单时：

但是当使用滚动时，这不起作用，徽标与页面正文以及 Default.aspx 中的表格重叠。看下面的截图：

我还尝试更改 css 中的位置，我已将绝对替换为固定，我得到了相同的结果。我不希望徽标在表格和页面正文中的任何对象上重叠。

【问题讨论】：

标签： html css asp.net webforms master-pages

【解决方案1】：

您可以在此处阅读有关 position 属性的信息：https://www.w3schools.com/css/css_positioning.asp，它将解释为什么您会看到 position: absolute 的滚动效果。如果您想将其向右移动而不影响页面上的其他元素，可以尝试使用 position: relative。

【讨论】：

使用 position: relative 使 logo 避免重叠，但 logo 被放置在左下角而不是右下角。
您可以尝试使用 align 或 margin 将其向右移动，一旦您将其设置为相对。
我已将其设置为绝对值，然后我将 z-index 属性设置为 -1，因此即使在滚动时，徽标也始终正确放置在右下角。当滚动徽标重叠但不在身体上的组件（桌子等），它作为它的一部分保留在背景中，这对我有好处。我必须说，在这种情况下使用 z-index，relative 的行为与 absolute 相同，使用一个或另一个没有区别。