问题描述
我试图在母版页的右下角插入一个徽标,它可以工作,但是当滚动徽标在页面正文上重叠时。
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>
.logo-img {
position: absolute; // also I have tried fixed and the same occurs
right: 0px;
bottom: 0px;
}
最初在网页表单加载时:
但是当使用滚动时,这不起作用,徽标与页面正文和 Default.aspx 中的表格重叠。见下面的截图:
此外,我还尝试更改 css 中的位置,我已将绝对替换为固定,并且得到了相同的结果。我不希望徽标在表格和页面正文中的任何对象上重叠。
解决方法
您可以在此处阅读有关 position 属性的信息:https://www.w3schools.com/css/css_positioning.asp,它会解释为什么您会看到 position: absolute 的滚动效果。如果您想将其向右移动而不影响页面上的其他元素,不妨试试 position:relative。