Question

我的页面有固定的标题，下面有内容。我有一个div元素，我想在其中相对定位另一个div。所以我使用以下结构：

标题：固定位置
容器div：相对位置
div内的div：绝对位置

这一切看起来都不错，但是在滚动时，相对和绝对div都显示在标题的前面。

<!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}}

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

Answer 1

这将为您工作：

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>

我刚刚将z-index: 0;添加到div.relative，将z-index: 9;添加到h2 [可以将z-index添加到h2根据您的要求，它可以用作图层格式，因此，如果您希望h2成为所有元素的顶层，甚至可以使用z-index: 9999;，但这取决于页面中的其他元素。]。

Answer 2

我相信在标头中添加简单的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>

Answer 3

在您的z-index: 1; Fixed中使用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>

Answer 4

使用 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>

Answer 5

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

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

足以解决您的问题。

Answer 6

z-index是最明显和最简单的方法。将z索引设置为高数字，例如9999-z-index:9999。这会将标头带到最顶层。

CSS固定和绝对

6 个答案: