一个部分的内容出现在另一个部分

Question

在下图中，您可以看到我的技能文本位于不应该位于的部分，即 home-section 在上图中，可以看到主页部分出现了Skills。请注意，我使用 Bootstrap 行来设置内容样式

下面是 html 代码 ------ <-- 我添加了 bootstrap -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Portfolio</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/29ea37403a.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <section id="home-section">
      <nav class="navbar navbar-expand-lg navbar-light">
        <h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            
            <li class="nav-item">
              <a class="nav-link active" href="#">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="row">
        <div class="col-lg-6 col-md-6">
          <div class="home-contect">
            <h1 class="home-title">I have software development experience</h1>
            <h5 class="home-description">
              Hi! I'm a software developer - Developing elegant mobile sofwares
              for companies all over the world
            </h5>
            <div class="button-con">
              <button
              type="button"
              class="home-button btn btn-lg btn-warning download-button"
            >
              Let's Talk <i class="fa-solid fa-paper-plane"></i>
            </button>
            <button
              type="button"
              class="home-button btn btn-lg btn-outline-warning download-button">
              Resume <i class="fa-solid fa-arrow-down"></i>
            </button>
            </div>
            <div class="links">
              <h6>Check Out My

              <div class="home-icon-container" id="github"><a href="https://github.com/samtuga1" ><i class="home-icon fa-brands fa-github"></i></a></div>
                <div class="home-icon-container"><a href=""><i class="home-icon fa-brands fa-linkedin-in"></i></a></div>
                <div class="home-icon-container"><a href="https://twitter.com/twusami"><i class="home-icon fa-brands fa-twitter"></i></a> </div>
                </h6>
              </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6">
          <img
            class="personal-photo"
            src="assets/portfolio-image.png"
            alt="A picture of me"
          />
        </div>
      </div>
    </section>
    <section title="skill-section">
        <h1>Skills</h1>
    </section>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

下面是我的css样式

/* Home Section */
#home-section{
    padding-left: 10%;
    padding-right: 10%;
}
h1{
    text-align: left;
    font-size: xxx-large;
}

.personal-photo{
    position: absolute;
    margin-left: 11%;
}
.btn{
    margin-top: 15px;
}
.home-description{
    text-align: left;
    padding: 2% 0;
}
.home-button{
    margin-right: 4px;
}
.home-icon{
    color: black;
}
.home-icon-container#github{
    margin-left: 20px;
}
.home-icon-container{
    margin-top: 15px;
    margin-right: 13px;
    padding: 11px;
    border-radius: 100%;
    background-color: #dcedc8;
    display: inline-block;
}

/* skill-section */
#skill-section{
    background-color: gold;
    padding: 5% 10%;
}

/* media-queries */
@media (min-width: 500){
    .personal-photo{
        width: 0px;
    }
}

@media (max-width: 768px){
    h1.home-title{
    text-align: center;
    }
    .home-description{
        text-align: center;
    }
    .button-con{
        text-align: center;
    }
    .links{
        text-align: center;
    }
    .personal-photo{
        width: 50%;
    }   
}

Answer 1

图像的显示属性为 'absolute'。 MDN.

它可能需要更多的边距以避免遮盖文本，但您最好使用不同的方式来定位图像而不是使用绝对。

一个部分的内容出现在另一个部分

content of a section appearing in another section

html

css

bootstrap-4