个人中心
gpt4 book ai didi

html - 我的新 div 元素没有出现在网页中。看起来，div 元素隐藏在背景图片后面

转载 作者：行者123 更新时间：2023-11-28 05:37:40 28 4
gpt4 key购买 nike

我的新 div 元素 ( <div id="secondary-content"> ) 似乎隐藏在图像后面。我键入的任何内容都显示在图像后面。我想在背景图片之后继续工作。

这是我的代码:

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <title>DISPLAY</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="header">
    <header>
      <div class="logo">
        <h1 class="title ir"></h1>
      </div>
      <div class="navigation">
        <div>
          <a href="#" class="twitter"></a>
          <a href="#" class="facebook"></a>
          <a href="#" class="blog"></a>
          <a href="#" class="pin"></a>
          <a href="#" class="google"></a>
          <a href="#" class="inter"></a>
        </div>
      </div>
    </header>
  </div>
  <div class="clearfix"></div>
  <div class="header bottom">
    <hr>
    <ul class="menu">
      <li><a href="#">HOME</a></li>
      <li class="active"><a href="#">ABOUT</a>
        <ul>
          <li><a href="#" class="company">Company</a></li>
          <li><a href="#" class="text1">Text1</a></li>
          <li><a href="#" class="text1">Text1</a></li>
          <li><a href="#" class="text1">Text1</a></li>
          <li><a href="#" class="text1">Text1</a></li>
        </ul>
      </li>
      <li><a href="#">WORK</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
    <div class="banner">
      <img src="img/bg.jpg" />
      <div class="content">
        <p>Lorem ipsum dolor sit amet, et has omnium luptatum, eos ad simul discere honestatis. Ius laudem commodo conceptam eu, sit no dico altera.
        </p>
      </div>
      <p id="submission">
        <button class="button">Browse Portfolio</button>
      </p>
    </div>
  </div>
  <div id="secondary-content">
    <div class="wrapper">
      <article style="background-image: url('images/article-image-1.jpg');">
        <div class="overlay">
          <h4>Secondary Content</h4>
          <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
          <a href="#" class="more-link">View more</a>
        </div>
      </article>
      <article style="background-image: url('images/article-image-2.jpg');">
        <div class="overlay">
          <h4>Secondary Content</h4>
          <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
          <a href="#" class="more-link">View more</a>
        </div>
      </article>
      <div class="clear"></div>
    </div>
  </div>
</body>
</html>

css代码在这里

* {
  padding: 0 px;
  margin: 0 px;
}

body {
  font - family: 'Roboto', sans - serif;
  font - size: 18 px;
}


/* logo */

.ir {
  background - color: transparent;
  border: 0;
  overflow: hidden;
  text - indent: -9999 px;
  background - image: url(img / logo.jpg);
  background - size: 100 % auto;
  background - repeat: no - repeat;
  width: 100 %;
  height: 100 %;
}

.header {
  height: 140 px;
}

.logo {
  width: 18 %;
  float: left;
  height: 100 %;
}

.logo h1 {
  display: inline - block;
  margin - left: 100 %;
  margin - top: 10 %;
}

.navigation {
  float: right;
  width: 43 %;
  margin - top: 4 %;
}


/* social icons */

.facebook {
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - image: url("img/icons/facebook.png");
  background - repeat: no - repeat;
}

.facebook: hover {
  background - image: url("img/icons/facebookc.png");
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - repeat: no - repeat;
}

.twitter {
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - image: url("img/icons/twitter.png");
  background - repeat: no - repeat;
}

.twitter: hover {
  background - image: url("img/icons/twitterc.png");
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - repeat: no - repeat;
}

.blog {
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - image: url("img/icons/blog.png");
  background - repeat: no - repeat;
}

.blog: hover {
  background - image: url("img/icons/blogc.png");
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - repeat: no - repeat;
}

.pin {
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - image: url("img/icons/pininterest.png");
  background - repeat: no - repeat;
}

.pin: hover {
  background - image: url("img/icons/pininterestc.png");
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - repeat: no - repeat;
}

.google {
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - image: url("img/icons/google.png");
  background - repeat: no - repeat;
}

.google: hover {
  background - image: url("img/icons/googlec.png");
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - repeat: no - repeat;
}

.inter {
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - image: url("img/icons/spider.png");
  background - repeat: no - repeat;
}

.inter: hover {
  background - image: url("img/icons/spiderc.png");
  height: 50 px;
  width: 50 px;
  font - size: 0 px;
  display: inline - block;
  background - repeat: no - repeat;
}

header {
  float: left;
  width: 100 %;
  height: 140 px;
  background - color: light - grey;
}

hr {
  display: block;
  margin - top: 0.5e m;
  margin - bottom: 0.5e m;
  margin - left: 19 %;
  margin - right: 20 %;
  border - style: inset;
  border - width: 1 px;
}

.menu,
.menu ul,
.menu li,
.menu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

ul.menu {
  margin: 1 % auto 0 18 %;
}

.menu {
  height: 40 px;
  width: 350 px;
  background: #FFF;
  /* change it to #FFF */
}

.menu li {
  list - style: none;
  float: left;
  display: block;
  height: 40 px;
  position: relative;
}

.menu li a {
  display: block;
  text - decoration: none;
  font - weight: bold;
  color: #737373;
  font-size: 15px;
  padding: 0 15px;
  margin: 5px 0;
  line-height: 30px;
  transition: color .3s ease;
  -moz-transition: color .3s ease;
  -webkit-transition: color .3s ease;
  -ms-transition: color .3s ease;
}

.menu li:hover > a {
  color: #2ECD71;
}


/* submenu */

.menu ul {
  opacity: 0;
  position: absolute;
  background: #BABABA;
  transition: opacity.25 s ease.1 s;
  - moz - transition: opacity.25 s ease.1 s;
  - webkit - transition: opacity.25 s ease.1 s;
  - ms - transition: opacity.25 s ease.1 s;
}

.menu li: hover > ul {
  opacity: 1;
}

.menu ul li {
  height: 0;
  overflow: hidden;
  padding: 0;
}

.menu li: hover > ul li {
  height: auto;
  overflow: visible;
}

.menu ul li a {
  width: 100 px;
  margin: 0;
  text - align: center;
  padding: 5 px 10 px;
  color: white;
}

.menu ul li a: hover {
  background - color: #737373;
  color: white;
}

.banner {
  position: absolute;
}

.banner > img {
  width: 100%;
  height: auto;
}

.banner > .content {
  position: relative;
  top: 0;
  bottom: 0;
  overflow: auto;
  text-align: center;
  margin: 1% 16% 0 16%;
  font-weight: 500;
  color: #BABABA;
  text - transform: uppercase;
  line - height: 1.5e m;
}

.button {
  background - color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1% 16% 0 16%;
  cursor: pointer;
  position: relative;
  z-index: 1000;
}

# submission {
  text - align: center;
}

# secondary - content {
  padding: 60 px 0;
  text - align: center;
}

# secondary - content article {
  width: 460 px;
  height: 270 px;
  float: left;
  background - color: #f5f5f5;
}

# secondary - content article: first - child {
  margin - right: 20 px;
}

# secondary - content article.overlay {
  background: rgba(255, 255, 255, .95);
  height: 230 px;
  width: 190 px;
  padding: 20 px;
}

article h4 {
  border - bottom: 1 px solid #02b8dd;
  padding-bottom: 20px;
}

.more-link {
  border: 1px solid #02b8dd;
  color: #02b8dd;
  padding: 6px 20px;
  border-radius: 3px;
}

.more-link:hover {
  background-color: #02b8dd;
  color: #fff;
}

@ media(max - width: 768 px) {}

@ media(max - width: 1024 px) {}

最佳答案

您可以使用 z-index 来定义元素显示在顶部的顺序(较高的值意味着在具有较低值的元素上方):

.header {
    z-index: 1;
}

#secondary-content {
    z-index: 2;
}

编辑:我假设您的横幅 bg.jpg 位于次要内容之上，因为它是绝对定位的，而内容仍然是静态的。绝对定位意味着它不占用文档中的空间，因此其他内容可以移动到该空间中。如果您不知道它们的确切作用，您可能应该阅读有关相对与绝对定位的内容。

来自 https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ :

The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page.

关于html - 我的新 div 元素没有出现在网页中。看起来，div 元素隐藏在背景图片后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38099433/

28 4 0
文章推荐： css - Apaches DTM to Plaintext for css-querying
文章推荐： javascript - 如何在 HTML 页面上使用 JQuery 显示来自 json 文件的标签？
文章推荐： php - "Notice: Undefined variable"、 "Notice: Undefined index"、 "Warning: Undefined array key"和 "Notice: Undefined offset"使用 PHP
文章推荐： css - 用 BeautifulSoup 中的字符串替换字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com