Question

我正在Laravel中创建一个Web应用程序，并且有一个用于header元素的模板。我要做的是将标题固定在顶部。我有以下代码可以做到这一点：

    .header{
    background-color: #ffffff;
    width: 100%;
    height: 10%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
   }

但是，页眉出现在页面的下方，我的页眉至其他元素也无法正常工作。那么，如何使页眉固定在顶部，而其他样式仍然有效？谢谢

Answer 1

当给定固定元素的高度时，可能会出现重叠的问题，在这种情况下，会排斥标题中的其余内容。

即，此处标头的高度为<a href="/index.php/leave/assignLeave" target="_self" xpath="1"> <img src="/webres_5acde3dbd3adc6.90334155/orangehrmLeavePlugin/images/ApplyLeave.png" style=""> </a>，因此可以通过为内容赋予"no such element: Unable to locate element: {"method":"css selector","selector":"a[src='webres_5acde3dbd3adc6.90334155/orangehrmLeavePlugin/images/ApplyLeave.png']"}"来将其从内容中排斥掉。

当您使用50px或margin-top:50px;时，请使用position:absolute;，position:fixed;，top，left提及您想要的位置是

尝试一下

right

bottom

Answer 2

body{
    background-color: #7e797b;
    }
.header{
    background-color: #ffffff;
    width: 100%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
    left:0;
    top:0
   }

<html>
<head>
<body>
	<header class="header">		
    <h1>Header</h1>
	</header>
</body>
</head>
</html>

制作标头的完美方法

2 个答案: