滚动时在右下角的 Master asp 页面中插入徽标不起作用：重叠
Posted
技术标签:
【中文标题】滚动时在右下角的 Master asp 页面中插入徽标不起作用：重叠【英文标题】：Inserting logo in Master asp page at the bottom right corner does not work when scrolling: overlaps 【发布时间】：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 中的位置，我已将绝对替换为固定，我得到了相同的结果。我不希望徽标在表格和页面正文中的任何对象上重叠。
【问题讨论】：
【参考方案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 相同，使用一个或另一个没有区别。以上是关于滚动时在右下角的 Master asp 页面中插入徽标不起作用：重叠的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET入门教程 2.2.4Master页面中使用级联样式表[3]