Why tag or any other tag are not stacking over each other?

Question

I am trying to create one design where i need to center some content in section from top to bottom like in column,

here is the code below

1:HTML

<div class="section">
<div class="content">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
    soluta, molestiae quia aperiam doloremque odit dolores veritatis tempora
    architecto illo facere, iure reprehenderit ab, odio perferendis ex sint
    temporibus quidem!
  </p>
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
    soluta, molestiae quia aperiam doloremque odit dolores veritatis tempora
    architecto illo facere, iure reprehenderit ab, odio perferendis ex sint
    temporibus quidem!
  </p>
</div>

Here is SCSS/CSS

 .section {
  background-image: url(".././assets/scss/images/top_section_bg.jpg");
  background-size: cover;
  padding: 100px;

  .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 800px;
    height: 500px;
    border-radius: 5px;
    margin: 0 auto;

    &::before {
      content: "";
      background: $bg-dark 0% 0% no-repeat padding-box;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
    }

     p {
      position: relative;
      color: #ffffff;
      margin:100px;
      line-height: 0.9;
  
    }
  }
}

Above code is in which I am trying to make that black bg tranparent and text over it to appear clearer

Answer 1

You need to add flex-direction: column to .content container as the default direction for flex is row which is left-to-right but if you need to change to top-to-bottom then you need to change the flex-direction.

.section {
  background-image: url(".././assets/scss/images/top_section_bg.jpg");
  background-size: cover;
  padding: 100px;
}

.section .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 800px;
  height: 500px;
  border-radius: 5px;
  margin: 0 auto;
}

.section .content::before {
  content: "";
  background: black 0% 0% no-repeat padding-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.75;
}

.section .content p {
  position: relative;
  color: #fff;
  margin: 100px;
  line-height: 0.9;
}

<div class="section">
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti soluta, molestiae quia aperiam doloremque odit dolores veritatis tempora architecto illo facere, iure reprehenderit ab, odio perferendis ex sint temporibus quidem!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti soluta, molestiae quia aperiam doloremque odit dolores veritatis tempora architecto illo facere, iure reprehenderit ab, odio perferendis ex sint temporibus quidem!
    </p>
  </div>
</div>

Answer 2

If I understand the question correctly all you need to do is assign flex-direction: column to .content so that paragraphs could be displayed in a column. Otherwise the default is row.