logo标签列表

CSS 固定定位和绝对定位

htmlcss
6

我的页面有一个固定的页眉，并且下面有内容。我有一个div元素，里面我想相对定位另一个div。因此，我使用以下结构：

  • 头部：固定位置
  • 容器div：相对定位
  • div内部：绝对定位

这看起来很不错，但实际上，当滚动时，相对和绝对的div会显示在页眉前面。

div.relative {
    position: relative;
    width: 400px;
    height: 1000px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

我知道z-index，但在使用另一个CSS元素之前，我想知道是否可能在不添加新变量到已有代码的情况下解决这个问题。谢谢！

顶部：0；上内边距：作为您的标题高度。 - Dmytro Lishtvan
1
我也是。我在编辑器中检查了一下，它可以正常工作。https://cr8code.co/editor.php?workid=e1f4250c3615a702dd021f430d42bd9d - Güney Saramalı
1
以上代码无法正常工作，因为它将两个 div 显示在标题前面。这实际上是 OP 在问题中描述的问题。他询问如何将标题置于顶部，大多数答案都提供了解决方案。因此，请停止回复所有答案都有问题。 - Thomas Scheffer
只有相对和绝对的div在我的标题前面。我的浏览器已经过时（公司限制），无论是在Firefox还是Chrome中都是一样的。FF版本：52.9.0，Chrome版本：68.0.3440.75。虽然我刚刚检查了IE，它在那里正常工作，所以我认为只有我们公司的Chrome和FF已经过时了。 - CAJ69I
6个回答
4
这对你有用： 

div.relative {
  position: relative;
  width: 400px;
  height: 1000px;
  border: 3px solid #73AD21;
  z-index: 0;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

h2 {
  position: fixed;
  background-color: white;
  z-index: 9;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem
    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum
    dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <div class="relative">This div element has position: relative;
    <div class="absolute">This div element has position: absolute;</div>
  </div>

</body>

</html>

我刚刚在`div.relative`中添加了`z-index: 0;`，并在`h2`中添加了`z-index: 9;`。`h2`的`z-index`可以根据您的要求进行更改，它可以作为图层格式工作，因此如果您希望您的`h2`位于所有元素的顶部，甚至可以使用`z-index: 9999;`，但这完全取决于页面中的其他元素。
1
谢谢，weBBer！看起来我的FF和Chrome版本已经过时了，但由于这段代码将在公司内部使用，我不能假设其他人会有更新的浏览器（每个人都有相同的版本），因此确实需要应用z-indexing。 - CAJ69I
1
@CAJ69I 我的浏览器已经更新了，你的问题可能出在其他地方。我认为DomenikReitzne没有仔细看。 - Jithin Raj P R
2
我的错误...绿线很难看到... :D - Domenik Reitzner
1
@DomenikReitzner 没问题，兄弟，很高兴你理解了。干杯 :) - Jithin Raj P R
2
这也是我的错误，我应该为 div 使用背景颜色。 - CAJ69I
3

我认为在头部添加一个简单的z-index: 1是正确的做法。

div.relative {
    position: relative;
    width: 400px;
    height: 1000px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

3
将 z-index: 1; 添加到您的固定 header 中将解决问题。 

div.relative {
    position: relative;
    width: 400px;
    height: 1000px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: yellow;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

1
@DomenikReitzner，请您仔细观察向下滚动的div，它会覆盖在页眉上方。 - Mr. Roshan
2
使用 z-index。
h2{
   z-index:2;
  }


div.relative {
    position: relative;
    width: 400px;
    height: 1000px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
 
}
h2{
position: fixed;
background-color: white;
border-bottom:solid 1px #ccc;
top:0px;
z-index:2;
 
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

2

给元素添加位置会使其脱离页面的正常流程，这可能导致它们彼此重叠。唯一确保元素在z轴上以正确顺序显示的方法是使用CSS中的z-index属性。

h2{
   position: fixed;
   background-color: white;
   z-index: 1;
}

应该足以解决您的问题。
1

z-index是最明显和最简单的方法。将z-index设置为一个高数字，例如9999 - z-index:9999。这将使标题处于最顶层。

我会坚持使用z-indexing，谢谢你的回答！ - CAJ69I
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接