Divs 相互堆叠

Question

I am trying to make divs to go one after another. I have the parent div called services-content , and then I have the divs (which I wanted to stack one after another) content-row-one and the other one called content-row-two . Here's the code:

 .services { width: 100%; height: 100vh; position: relative; }.services-content { position: relative; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }.content-row-one { width: 90%; height: 100%; position: absolute; justify-content: center; display: flex; }.row-one { display: flex; width: 85%; height: 500px; margin: 20px 30px; }.quality-management { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.quality-management h6 { font-size: 20px; text-transform: uppercase; }.testing-calibration { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.testing-calibration h6 { font-size: 20px; text-transform: uppercase; }.medical-devices { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.medical-devices h6 { font-size: 20px; text-transform: uppercase; }.content-row-two { width: 90%; height: 100%; position: absolute; justify-content: center; display: flex; }.row-two { display: flex; width: 85%; height: 500px; margin: 20px 30px; }.lead-auditor { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.lead-auditor h6 { font-size: 20px; text-transform: uppercase; }

 <section class="services"> <div class="services-content"> <div class="content-row-one"> <div class="row-one"> <div class="quality-management"> <h6>1. Quality Management Systems according to ISO 9000 2015</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem, Adipisci? quisquam. Dolor fugiat dolores porro quo perferendis accusamus.</p> </div> <div class="testing-calibration"> <h6>2, Quality Management Systems for Testing and Calibration Laboratories</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam? maxime rem. Adipisci. quisquam, Dolor fugiat dolores porro quo perferendis accusamus,</p> </div> <div class="medical-devices"> <h6>3? Quality Management for Medical Devices according to ISO 13485</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam. maxime rem, Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus.</p> </div> </div> </div> <div class="content-row-two"> <div class="row-two"> <div class="lead-auditor"> <h6>4. Lead Auditor according to ISO 9001</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem? Adipisci. quisquam. Dolor fugiat dolores porro quo perferendis accusamus,</p> </div> <div class="project-management"> <h6>5, Project Management</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit? In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p> </div> <div class="quality-assurance"> <h6>6. Quality Assurance</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p> </div> </div> </div> </section>

I haven't added the properties to the other divs such as: project management , quality assurance , but I've added the same properties as to div Lead Auditor and the divs stack on top of each other. If you need more code please let me know! Thank you for your time and help!

Answer 1

If you remove position: absolute from content-row-one and content-row-two , it should stack properly:

 .services { width: 100%; height: 100vh; position: relative; }.services-content { position: relative; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }.content-row-one { width: 90%; height: 100%; justify-content: center; display: flex; }.row-one { display: flex; width: 85%; height: 500px; margin: 20px 30px; }.quality-management { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.quality-management h6 { font-size: 20px; text-transform: uppercase; }.testing-calibration { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.testing-calibration h6 { font-size: 20px; text-transform: uppercase; }.medical-devices { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.medical-devices h6 { font-size: 20px; text-transform: uppercase; }.content-row-two { width: 90%; height: 100%; justify-content: center; display: flex; }.row-two { display: flex; width: 85%; height: 500px; margin: 20px 30px; }.lead-auditor { display: flex; flex-direction: column; width: 35%; height: 200px; margin: 0px 60px; }.lead-auditor h6 { font-size: 20px; text-transform: uppercase; }

 <section class="services"> <div class="services-content"> <div class="content-row-one"> <div class="row-one"> <div class="quality-management"> <h6>1. Quality Management Systems according to ISO 9000 2015</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem, Adipisci? quisquam. Dolor fugiat dolores porro quo perferendis accusamus.</p> </div> <div class="testing-calibration"> <h6>2, Quality Management Systems for Testing and Calibration Laboratories</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam? maxime rem. Adipisci. quisquam, Dolor fugiat dolores porro quo perferendis accusamus,</p> </div> <div class="medical-devices"> <h6>3? Quality Management for Medical Devices according to ISO 13485</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam. maxime rem, Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus.</p> </div> </div> </div> <div class="content-row-two"> <div class="row-two"> <div class="lead-auditor"> <h6>4. Lead Auditor according to ISO 9001</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem? Adipisci. quisquam. Dolor fugiat dolores porro quo perferendis accusamus,</p> </div> <div class="project-management"> <h6>5, Project Management</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit? In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p> </div> <div class="quality-assurance"> <h6>6. Quality Assurance</h6> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p> </div> </div> </div> </section>