重叠边框和文本/文本重叠图像答案

【问题标题】：Overlap border and text / Text overlaps image重叠边框和文本/文本重叠图像
【发布时间】：2021-07-30 17:33:20
【问题描述】：

我想为导航设置一个与文本重叠的边框，以及一个与图像重叠的文本，以实现下面示例中的布局。

我尝试了不同的方法，但没有任何效果

这是我目前得到的：

.menu-link {
  list-style: none;
  margin: 2rem 0;
  text-align: right;
  border: 1px white solid;
}

.menu-link a {
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  color: rgba(255, 255, 255, 0.8);
  font-size: 4rem;
  text-transform: uppercase;
}

img {
  display: block;
  object-fit: cover;
}

.intro-image {
  position: relative;
  width: 100%;
}

.intro-image::after {
  content: "";
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<section class="intro-block">
  <div class="intro-text">
    <h1>Front-End Developer <br />UI Designer</h1>
  </div>
  <div class="hero-right">
    <ul class="hero-menu">
      <li class="menu-link"><a href="#">About</a></li>
      <li class="menu-link"><a href="#">Projects</a></li>
      <li class="menu-link"><a href="#">Contact</a></li>
    </ul>

    <div class="intro-image">
      <img src="./images/heroimg.jpg" alt="" />
    </div>
  </div>
</section>

我尝试对英雄文本使用“位置：绝对”，但图像向左移动。

对于导航，我正在考虑向 HTML 添加一个元素以包含导航链接并在其上放置一个绝对位置，而不是在 CSS 中添加边框，也许？

有没有办法实现这种布局？非常感谢任何帮助！

【问题讨论】：

您发布的 sn-p 与您发布的图片完全不同。我认为您遗漏了一些样式。

标签： html css image text overlap

【解决方案1】：

您可以使您的元素具有固定的宽度和高度。使用负位置值，您可以使其超出框。我不知道这是不是你要找的：

html:

<html>
<head>

</head>
<body>
  <div id="wrapper">
    <div class="box">
      <h1>About</h1>
    </div>
    <div class="box">
      <h1>Projects</h1>
    </div>
    <div class="box">
      <h1>Contact</h1>
    </div>
  </div>
</body>
</html>

css:

#wrapper
{
  position:absolute;
  right:150px;
}

.box
{
  position:relative;
  border: 1px solid black;
  width:200px;
  height: 50px;
}

.box h1
{
  position:absolute;
  right: -50px;
  top:-18px;
}

https://jsfiddle.net/cm03bjex/21/

position:relative 确保绝对位置是相对于框而不是整个屏幕。

【讨论】：