Question

我制作了一个带有固定HEADER元素的移动网站。一切都很好，直到我添加一些CSS过滤器。那些过滤器制作了图像＆＃34; hover＆＃34;在HEADER之上。

尽管事实上我找到了解决方案，但我真的想知道导致这种行为的原因是什么？它可以在不改变文档顺序的情况下以干净的方式解决吗？

我找到的简单解决方案

当HEADER放在html文档中的图像之后时，问题消失了。

我不喜欢这个解决方案，因为我正在开发一个响应式Wordpress主题。由于HEADER仅在移动设备上修复，我希望将其保存在header.php中，以便在平板电脑和台式机上正常使用。

风格

    @import url('//fonts.googleapis.com/css?family=Roboto:400,100'); 

* {
  margin:            0;
  padding:           0;
  list-style:        none;
  text-decoration:   none;
}

body {
  padding-top:       100px; /* Clear some space for fixed menu bar */
  background-color:  rgba(230, 225, 216, 0.7);

  /* Font settings */
  font-family:       'Roboto', sans-serif;
  color:             rgba(68, 63, 53, 1);
}




/* Link settings */
a,
a:hover,
a:visited {
  font-weight:       400;
  color:             rgba(68, 63, 53, 1);
}




/*Fixed menu bar */
header {
  position:          fixed;
  top:               0;
  width:            100%;
  background-color:  rgba(230, 225, 216, 1);
  border-bottom:     solid 1px rgba(18, 18, 15, 0.2);
  box-shadow:        0 0 15px rgba(18, 18, 15, 0.2);
}

/* Menu list */
nav ul {
  text-align:        center;
  margin:            0 25px;
}

/* Menu list item */
nav li {
  display:           inline-block;
  padding:           25px 10px
}

/* Menu list item on hover */
nav li:hover {
  background-color:  rgba(68, 63, 53, 0.1);
}





/* Content section */
section {
  width:             500px;
  margin:            0 auto 1000px auto;
}
p {
  margin:            15px 0 25px 0;
}

/* Image positioning settings */
img {
  display:           inline-block;
  width:             49.2%;
  height:            auto;
  margin:            0;
}

img:first-child,
img:nth-child(5),
img:nth-child(8){
  width:             100%;
}





/* Set up filters */
.greyscale {
  filter:           grayscale(100%);
  -webkit-filter:   grayscale(100%);
  -moz-filter:      grayscale(100%);
  -ms-filter:       grayscale(100%);
  -o-filter:        grayscale(100%);
}

.invert {
  filter:          invert(1);
  -webkit-filter:  invert(1);
  -moz-filter:     invert(1);
  -ms-filter:      invert(1);
  -o-filter:       invert(1);
}

.hue {
  filter:          hue-rotate(180deg);
  -webkit-filter:  hue-rotate(180deg);
  -moz-filter:     hue-rotate(180deg);
  -ms-filter:      hue-rotate(180deg);
  -o-filter:       hue-rotate(180deg);
}

和HTML

<header>
  <nav role='navigation'>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Item I</a></li>
      <li><a href="#">Item II</a></li>
      <li><a href="#">Item III</a></li>
    </ul>
  </nav>    
</header>

<section>
  <head>
    <h1>Scroll Downnnnn</h1>
  </head>

  <article>
      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike" />

      <p>Notice how the images with a filter appear on top of the fixed top menu instead of floating underneath it.</p>

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike"
           class="greyscale"/>

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike" />

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike"
           class="hue" />

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike" />

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike"
           class="greyscale"/>

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike"
           class="invert" />

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike"
           class="hue"/>

      <img src="http://media-cache-ec0.pinimg.com/736x/37/f3/17/37f3174b80532646f2998540f5d0146f.jpg" 
           alt="Hipster bike" />
  </article>
</section>

为什么CSS过滤器会更改文档的堆叠顺序？

我找到的简单解决方案

0 个答案: