Html 重叠时如何处理css中的固定位置属性

Html 重叠时如何处理css中的固定位置属性,html,css,asp.net,visual-web-developer,Html,Css,Asp.net,Visual Web Developer,我在上面描述了我的重叠问题。我希望他们看起来总是一样的 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></t

我在上面描述了我的重叠问题。我希望他们看起来总是一样的

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style>

        .buttonProperty{
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            float:right;
            margin-right:20px;



        }
        .buttonProperty:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        }


        .auto-style2 {
            height: 323px;
            background-image:url('images/img.jpg');
            background-size: 100% 100%;
           /*filter: grayscale(80%);*/ 
            filter: opacity(30%);
        }
        .tableProperty{
            position:fixed;
        }

        .auto-style3 {
            height: 154px;
        }

    </style>
</head>
<body style="height: 526px">

    <form id="form1" runat="server">


        <div class="auto-style3">
            <table style="width: 100%;" class="tableProperty">
                <tr>
                    <td>
                        <asp:Button ID="Button1" CssClass="buttonProperty" runat="server" Text="Button" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button2" CssClass="buttonProperty" align="right" runat="server" Text="Button" /></td>
                </tr>
            </table>
        </div>


    </form>
    <div class="auto-style2" >
    </div>
    <p>sfsd</p><br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
    <br />
    <p>sfsd</p>
    <br />
    <p>sfsd</p>
    <br />
</body>
</html>

.钮扣属性{
背景色:#4CAF50;/*绿色*/
边界:无;
颜色:白色;
填充:15px 32px;
文本对齐:居中;
文字装饰:无;
显示:内联块;
字体大小:16px;
利润:4倍2倍;
光标:指针;
-webkit转换持续时间:0.4s;/*Safari*/
过渡时间:0.4s;
浮动:对;
右边距:20px;
}
.按钮属性:悬停{
盒影:0 12像素16像素0 rgba(0,0,0,0.24),0 17像素50像素0 rgba(0,0,0,0.19);
}
.auto-style2{
高度:323px;
背景图片:url('images/img.jpg');
背景大小:100%100%;
/*过滤器:灰度(80%);*/
滤镜:不透明度(30%);
}
.tableProperty{
位置:固定;
}
.自动样式3{
高度:154px;
}
sfsd


sfsd


sfsd


sfsd


sfsd


sfsd


sfsd


sfsd


sfsd

sfsd


sfsd



sfsd


sfsd



这个问题有很多答案,但只有少数正确答案是通过实际查看您的代码得到的。你能提供你的代码吗

也许你应该把位置改成相对的,而不是固定的。边距和填充也可能会影响这一点


如果我看到你的密码,我会有一个明确的答案

位置:fixed
是这里的罪魁祸首。这有点像绝对定位,因为它将元素从正常流中移除(通常看起来像是在其他元素上渲染的元素)

您可以阅读Mozilla开发者网络上的定位:(MDN是HTML、CSS和JS基础文档的重要来源。)

fixed
功能的关键部分是:

从正常文档流中删除该元素;没有空间 为页面布局中的元素创建。相反,它是定位的 相对于屏幕的视口,滚动时不移动

您可以通过为
.tableProperty
使用不同的定位类型来修复此布局。(根据提供的代码,您可能根本不需要任何定位;这相当于默认值
position:static