set postion relative and absolute affect other element css-CodePudding

i tried to css this page original page. im having a problem with position. i set part 2 (each part is number in the image) position relative, part 3 position absolute and negative margin so it can be place on top of part 2. however, it affect part 4 and i dont know how to set the text below part 3 so it appear as the design

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "gt-ultra";
}
a {
  text-decoration: none;
  color: #000;
}
:root {
  --blue: #2c2e53;
  --orange: #bd945f;
  --grey: #f3f3f3;
  --grey_des: #acacac;
}
body {
  background: var(--grey);
}
header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  font-family: "gt-md";
  background: white;
  font-weight: normal;
}
.list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-left: 424px;
  text-transform: uppercase;
}
.list a:hover {
  padding-bottom: 10px;
  border-bottom: 5px solid var(--orange);
}
#banner {
  position: relative;
}
#banner img {
  width: 100%;
}
.content {
  position: absolute;
  top: 124px;
  left: 370px;
}
.content .title {
  color: var(--blue);
  font-size: 46px;
  text-transform: uppercase;
  border: 1px solid #000;
  margin-bottom: 0;
}
.content .name {
  color: var(--orange);
  font-size: 46px;
  text-transform: uppercase;
  border: 1px solid #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
.content p {
  border: 1px solid #000;
  font-family: "gt-md";
  margin-top: 24px;
  margin-bottom: 0;
  width: 562px;
}
.content button {
  background: var(--orange);
  color: white;
  padding: 24px 34px;
  border: none;
  text-transform: uppercase;
  margin-top: 24px;
}
.content button:hover {
  cursor: pointer;
}
#catelog {
  display: flex;
  justify-content: center;
}
.box {
  position: absolute;
  margin-top: -64px;
  /* width: 1286px; */
  border: 1px solid #000;
  background: white;
  padding: 60px 120px;
  display: flex;
  flex-direction: column;
  gap: 92px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 148px;
  border: 1px solid black;
  justify-content: center;
}
.item {
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item a {
  margin-top: 10px;
}
.item img {
  border: 1px solid #000;
}
.row:last-child {
}
.col {
  display: flex;
  flex-direction: column;
  gap: 94px;
  border: 1px solid #000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Xưởng mộc giá tốt</title>
    <!-- bootstrap -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
      crossorigin="anonymous"
    />
    <!-- fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- font  -->
    <link rel="stylesheet" href="/cat_gd/page2/css/style.css" />
    <!-- style css  -->
    <link rel="stylesheet" href="/cat_gd/page2/css/font.css" />
  </head>
  <body>
    <header>
      <img src="/cat_gd/page2/images/logo.png" alt="" />
      <div >
        <a href="#">trang chủ</a>
        <a href="#">giới thiệu</a>
        <a href="#">sản phẩm</a>
        <a href="#">tin tức</a>
        <a href="#">đối tác</a>
        <a href="#">liên hệ</a>
      </div>
    </header>
    <!-- ./header  -->
    <section id="banner">
      <img src="/cat_gd/page2/images/banner.png" alt="" />
      <div >
        <h2 >thế giới nội thất số 1 việt nam</h2>
        <h2 >hoàng hoan</h2>
        <p>
          Sứ mệnh của chúng tôi là kết hợp hài hòa giữa ý tưởng và mong muốn của
          khách hàng, đem lại những phút giây thư giãn tuyệt vời bên gia đình và
          những người thân yêu
        </p>
        <button>liên hệ ngay</button>
      </div>
    </section>

    <!-- ./banner  -->
    <section id="catelog">
      <div >
        <div >
          <div >
            <img
              src="/cat_gd/page2/images/loai-sp/icon-phong-khach.png"
              alt=""
            />
            <a href="#">Phòng khách</a>
          </div>
          <div >
            <img src="/cat_gd/page2/images/loai-sp/icon-phong-ngu.png" alt="" />
            <a href="#">Phòng ngủ</a>
          </div>
          <div >
            <img src="/cat_gd/page2/images/loai-sp/icon-phong-bep.png" alt="" />
            <a href="#">Phòng bếp</a>
          </div>
          <div >
            <img src="/cat_gd/page2/images/loai-sp/icon-phong-tam.png" alt="" />
            <a href="#">Phòng tắm</a>
          </div>
        </div>
        <div >
          <div >
            <img src="/cat_gd/page2/images/loai-sp/icon-tre-em.png" alt="" />
            <a href="#">Trẻ em</a>
          </div>
          <div >
            <img src="/cat_gd/page2/images/loai-sp/icon-van-phong.png" alt="" />
            <a href="#">Văn phòng</a>
          </div>
          <div >
            <img src="/cat_gd/page2/images/loai-sp/icon-cau-thang.png" alt="" />
            <a href="#">Cầu thang</a>
          </div>
          <div >
            <img
              src="/cat_gd/page2/images/loai-sp/icon-do-trang-tri.png"
              alt=""
            />
            <a href="#">Đồ trang trí</a>
          </div>
        </div>
      </div>
    </section>
    <!-- ./catalog  -->
    <section id="about-us">
      <div >
        <h2>sản phẩm nổi bật</h2>
        <div ></div>
      </div>
      <div >
        <div >
          <img src="" alt="" />
          <h3></h3>
          <div>
            <span><i ></i></span>
            <span><i ></i></span>
            <span><i ></i></span>
            <span><i ></i></span>
            <span><i ></i></span>
          </div>
        </div>
      </div>
    </section>

    <!-- Thư viện js  -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2"
      crossorigin="anonymous"
    ></script>
    <!-- Code js  -->
  </body>
</html>

CodePudding user response：

use position reletive and z-index to take section

CodePudding user response：

Don't need to set position absolute for this. Just try margin top in negative value