删除未显示在其他内容之上的内容

时间：2017-11-23 07:50:27

标签： html css z-index

https://jsfiddle.net/w25zne90/ 我玩过z-index：1;但是当我徘徊在图像顶部时，我似乎无法获得下拉。

我试过了：

ul li:hover ul li{
    display: block;
    background: rgba(0, 0, 0, 0.6);
    color:white;  
    z-index:2;
    }

2 个答案:

答案 0 :(得分：0)

在包含父元素的上声明z-index属性。

.header {
    display: table;
    margin: 0 auto;
    padding-top: 1px;
    /* Additional */
    z-index: 1;
    position: relative; /* required */
}

注意：此外，元素必须定位才能使用z-index属性创建堆叠上下文。

代码段示范：

＆＃13;
＆＃13; 
#menu-outer {
  height: 41px;
  background: rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
  border: 2px solid black;
  z-index: 1;
}

.header {
  display: table;
  margin: 0 auto;
  padding-top: 1px;
  /* Additional */
  z-index: 1;
  position: relative; /* required */
}

body {
  background: url("images/background.jpeg") no-repeat;
  background-attachment: fixed;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: georgia;
  font-size: 20px;
}

ul li {
  float: left;
  width: 250px;
  height: 50px;
  line-height: 40px;
  text-align: center;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  background: rgba(0, 0, 0, 1);
  color: white;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

ul li ul li:hover {
  text-decoration: underline;
  color: white;
}

.main {
  height: 2000px;
  width: 1400px;
  background-color: white;
  display: table;
  margin: 0 auto;
  margin-top: 80px;
  padding-top: 30px;
  padding-left: 30px;
}

.meme {
  padding-bottom: 30%;
  height: 0;
  width: 30%;
  margin: 1%;
  float: left;
  display: block;
}
＆＃13; 
<body>
  <div id="menu-outer">
    <div class="header">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a>About</a>
          <ul>
            <li><a href="ourteaml.html">Our Team</a></li>
            <li><a href="whatwedo.html">What we do</a></li>
            <li><a href="wherewegetourmemes.html">Where We Get Our Memes</a></li>
            <li><a href="adminmemes.html">Admin Memes</a></li>
          </ul>
        </li>
        <li><a>Memes</a>
          <ul>
            <li><a href="https://www.instagram.com/my.memes.are.not.dank/">Instagram Memes</a></li>
            <li><a href="https://www.facebook.com/CheekyMemesForCheekyTeens42069/?modal=composer&notif_id=1511316467247909&notif_t=aymt_make_page_post_tip&ref=notif">Facebook Memes</a></li>
            <li><a href="memebank.html">Meme Bank</a></li>
          </ul>
        </li>
        <li><a>News</a>
          <ul>
            <li><a href="howtomakememes.html">How To Make Memes</a></li>
            <li><a href="photoshop.html">Photoshop</a></li>
            <li><a href="typesofmemes.html">Types Of Memes</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="main">
    <div class="memes">
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
      <div class="meme">
        <img src="https://placehold.it/400x400" height="400" width="400">
      </div>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

Updated JSFiddle

答案 1 :(得分：0)

z-index属性不能与position: static一起使用，这是默认的位置值，

将position: relative设置为menu-oute r和ul然后您可以设置z-index值

#menu-outer {
  position: relative;
    height: 41px;
    background: rgba(0, 0, 0, 0.6);
    margin-bottom:10px;
    border:2px solid black;
    z-index: 1;
}
.header{
    display: table;
    margin: 0 auto;
    padding-top:1px;
}
body{
    background: url("images/background.jpeg") no-repeat;
    background-attachment: fixed;
}
ul{
  position: relative;
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-family: georgia;
    font-size:20px;
    z-index: 2;
}

<强> Working fiddle

相关问题
最新问题