我尝试为这个页面添加CSS。我的位置有问题。我设置了第2部分(每个部分都是图像中的数字)的相对位置，第3部分的绝对位置和负边距，所以它可以放在第2部分的顶部。但是，它影响了第4部分，我不知道如何将文本设置在第3部分下面，使其显示为设计
* {
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/bootstrap@4.6.1/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 class="list">
<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 class="content">
<h2 class="title">thế giới nội thất số 1 việt nam</h2>
<h2 class="name">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 class="box">
<div class="row">
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-phong-khach.png"
alt=""
/>
<a href="#">Phòng khách</a>
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-ngu.png" alt="" />
<a href="#">Phòng ngủ</a>
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-bep.png" alt="" />
<a href="#">Phòng bếp</a>
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-tam.png" alt="" />
<a href="#">Phòng tắm</a>
</div>
</div>
<div class="row">
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-tre-em.png" alt="" />
<a href="#">Trẻ em</a>
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-van-phong.png" alt="" />
<a href="#">Văn phòng</a>
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-cau-thang.png" alt="" />
<a href="#">Cầu thang</a>
</div>
<div class="item">
<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 class="title">
<h2>sản phẩm nổi bật</h2>
<div class="line"></div>
</div>
<div class="products">
<div class="product">
<img src="" alt="" />
<h3></h3>
<div>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></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/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
crossorigin="anonymous"
></script>
<!-- Code js -->
</body>
</html>不需要设置绝对位置。试试margin top设置为负值
使用position:relative和z-index取section