oscarthroedsson Comments - Answer Overflow

oscarthroedsson

Explore posts from servers

•Created by oscarthroedsson on 9/13/2023 in #front-end

Position:relative is confusing me

The code if someone wants to see it: Code: React components.

return (
    <>
      <Nav></Nav>
      <header className="xs:w-full xs:h-auto xs:m-0 xs:rounded-lg xs: xs:rounded-lg xs:p-10  headerBg ">
        <div className="xs:text-center">
          <p className="text-center py-4">
            <span className="text-main-color heavy-p font-semi-p">
              Brottskollen.se
            </span>{" "}
            ger dig
          </p>
          <h1 className="xs:text-4xl text-center font-semi-p">
            Statistik på Sveriges Kriminalitet
          </h1>
          <p className="text-center py-6">helt ocencuerat</p>
        </div>
        <div className="text-center">
          <p className=" text-5xl font-semi-p">1 478 291</p>
          <p>reg polishändelser i år</p>
        </div>
        <div className=" flex-wrap flex-auto xsRelative flex items-center"> //here is position:relative applyed
          <ListBox></ListBox>
          <CommonCrime></CommonCrime>
          <WeekData></WeekData>
        </div>
      </header>
      <main className="mt-20">
        <section>
          <header>
            <h2>Should not be here</h2>
            <p></p>
          </header>
        </section>
      </main>
      <ul>
        {latestCrimes.map((info) => {
          return <li key={info.id}>{info.type}</li>;
        })}
      </ul>
    </>
  );
}

return (
    <>
      <Nav></Nav>
      <header className="xs:w-full xs:h-auto xs:m-0 xs:rounded-lg xs: xs:rounded-lg xs:p-10  headerBg ">
        <div className="xs:text-center">
          <p className="text-center py-4">
            <span className="text-main-color heavy-p font-semi-p">
              Brottskollen.se
            </span>{" "}
            ger dig
          </p>
          <h1 className="xs:text-4xl text-center font-semi-p">
            Statistik på Sveriges Kriminalitet
          </h1>
          <p className="text-center py-6">helt ocencuerat</p>
        </div>
        <div className="text-center">
          <p className=" text-5xl font-semi-p">1 478 291</p>
          <p>reg polishändelser i år</p>
        </div>
        <div className=" flex-wrap flex-auto xsRelative flex items-center"> //here is position:relative applyed
          <ListBox></ListBox>
          <CommonCrime></CommonCrime>
          <WeekData></WeekData>
        </div>
      </header>
      <main className="mt-20">
        <section>
          <header>
            <h2>Should not be here</h2>
            <p></p>
          </header>
        </section>
      </main>
      <ul>
        {latestCrimes.map((info) => {
          return <li key={info.id}>{info.type}</li>;
        })}
      </ul>
    </>
  );
}

//The class:

.xsRelative {
  position: relative;
  top: 140px;
  gap: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xsRelative {
  position: relative;
  top: 140px;
  gap: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

3 replies

Gaming

Programming