Question

所以here是我的HTML代码，而here是CSS。它很短。我的问题是每当我设置我的标题（它是一个div）到位置：固定它就会消失，即使我设置了

top:0;
left:0;
z-index:1;

如果有人可以提供帮助，那么搜索就无法提供帮助。非常感谢！

PS：这个网站的文字格式是怎么回事？我需要写＆lt;＆＃39; br /＆＃39;＆gt;跳到下一行wtf？但是然后在HTML中对它进行评论并不起作用。顺便说一句，这就是代码在两张图片中并没有精美嵌入的原因。对不起。

Answer 1

你的标题没有消失，它只是在你的两个浮动元素后面。将<div id="header">代码移到浮动div下面。

Z-index仅适用于相同位置值的元素，这就是为什么它不适合你。

那就是说，根据你想要实现的目标，我可以避免浮动并改为考虑使用flexbox布局。

Answer 2

你必须给你的标题div一个宽度。当div为空并且没有宽度和高度时，它基本上是不可见的。

Answer 3

＆＃13;

#header {
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  background-color: red;
  margin-bottom: 10px;
  z-index: 1;
  width: 100%;
}
#footer {
  clear: both;
  position: relative;
  height: 100px;
  width: 100%;
  margin-bottom: 20px;
  top: 10px;
  
}
.left{
  float: left;
  height: 800px;
  width: 10%;
  background-color: green;
}
.right{
  float: right;
  height: 800px;
  width: 89.5%;
  background-color: green;
}

＆＃13;

<html>
  <head>
    <title>Test the geader shit</title>
  </head>
  <body>
    <div id='header'>fixed header</div>
    <div class='left'>left shit</div>
    <div class='right'>right shit</div>
    <div id='footer'>footer</div>
  </body>
</html>

＆＃13;

当我们修复元素位置时，我们需要提到宽度，在链接中我没有看到你已经提到#header元素的任何宽度，而且在html中没有文字或内容

如果你提到宽度，它会出现。 100％宽度使其成为浏览器视口的全宽

我的立场：固定标题消失了

3 个答案: