Question

我有一个更大的HTML标题，其中包含一个菜单和一张大图片。

我想将图片放在某个地方作为＆＃34;标题＆＃34;到页面。

每当我尝试在某个地方添加<h1>标记时，它会将文本放在菜单上方，而这不是我想要的。

我希望能够在图片中的某个位置放置任何形式的标签，我很难找到解决方案，因为我的代码效率不高。

我开始明白我的问题是什么，但我找不到解决方案。

以下是what's going on的模板。我想把文字放在我脸旁的某个地方（听起来很奇怪），有人吗？

＆＃13;

body {
  font: 15px/1.5 Gravity, Arial;
  padding: 0;
  margin: 0;
}

header {
  width: 100%;
  height: 800px;
  background: url('../img/web_bg.jpg');
  background-size: cover;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #000;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  z-index: 100;
  position: fixed;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #fff;
  z-index: 100;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
  ;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
}

nav ul li a:hover {
  background-color: #white;
  border: none;
  color: #000;
  text-align: center;
  opacity: 0.6;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

＆＃13;

<header id="home">
  <h1>MOHANAD ARAFE</h1>
  <nav>
    <div class="menu-icon">
      <i class="fa fa-bars fa-2x"></i>
    </div>
    <div class="logo">MOHANAD ARAFE</div>
    <div class="menu">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

＆＃13;

Answer 1

你很好，为此欢呼。对于您面临的问题，我建议您使用 z-index 。它是一个CSS属性，并将元素定义为图层。具有更大z-index的元素将是最顶层，其次是具有较小z-index的元素。我建议你将图像的z-indec设置为最低，并将上面的内容设置在另一个容器中，并将此容器的z-index设置为更高的范围，这应该可以解决您的问题。

Here's more reference on z-index

快乐编码。

Answer 2

我建议在这种情况下使用网格，你必须处理元素的位置。网格速成课程将是最佳选择。我个人经常使用它，除了z索引之外不必关心任何事情。

Answer 3

你可以使用position：absolute;对于h1标记并使用％中的最高值，并在％

中使用左值

h1{
  position:absolute; 
  top: value in %;
  left: value in %;
  }
header{
   position:relative;      
  }

注意：为h1应用类名并为该类应用css，否则它可能会影响子页面中的h1标记。

Answer 4

尝试给头部定位：绝对，然后定位：相对于孩子。希望这会对你有所帮助。

将文字放在背景标题中

4 个答案: