【问题标题】:Z-index not working even after specifying position即使在指定位置后 Z-index 也不起作用
【发布时间】:2015-09-08 17:45:12
【问题描述】:

我遇到了一个问题: HTML:

 <!DOCTYPE html>
    <html>
        <head>
            <title>Forming Layouts</title>
            <meta http-equiv="author" content="@infinity">
            <link rel="stylesheet" type="text/css" href="E:\HTML STUFF\css.css">
        </head>
        <body>
            <h1>The Evolution of the Bicycle</h1>
            <p id="top">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
            <p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
            <p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
            <p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
            <p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
            <p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
        </body>
</html>

CSS:

h1{
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:cyan;
    margin:0px;
    z-index:10;
    color:white;
}
#top{
    margin-top:100px;
}
p{
    position:static;
    z-index:20;
    background-color:white;
}

现在,当我向下滚动时,段落应该会出现在标题上方。但它不是那样的。即使所有段落的 z-index 为 20,h1 为 10,h1 与段落重叠..

请帮忙。

【问题讨论】:

  • 你想让你的The Evolution of the Bicycle 标题保持在顶部吗?
  • 为什么要让段落覆盖标题?
  • 是的......这是要求......
  • @APAD1,我基本上不希望这样,但这让我感到困惑。我需要了解 CSS 中的所有内容。

标签: html css z-index


【解决方案1】:

看到这个fiddle

您必须将您的position 更改为relative。也就是说,p 的新 CSS 如下

p{
    position:relative;
    z-index:20;
    background-color:white;
}

【讨论】:

  • 因为z-index 仅适用于absolutefixedrelative 定位元素。 w3schools.com/cssref/pr_pos_z-index.asp
  • z-index 仅在位置指定为默认值(即static)以外的任何值时才会遵守,这包括absolutefixedrelative。跨度>
  • @Siddhant 请看answer 了解静态和相对的区别。
  • @Adam 谢谢你的有效提示...大力支持.. :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-01-23
  • 2015-02-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-25
相关资源
最近更新 更多