Kevin Powell - Community•14mo ago

Position:relative is confusing me

Hey! Enviroment: VS code, react, eslint, tailwind + normal CSS and Rechart. Problem: Don´t know how to work around position:relative. I have bildt the landing page on the img that I have attached in this message. You can see 2 containers, there is one more that you can´t see. On these containers have I used position:relative. i partial understand how relative works and i cant find any additional info that explain how I should solve my problem. I want the text "Should not be here" under the first container to be under the last container. But because of position:relative is comes under the header container. The reason I am using relative is because I want the result that is shown in IMG 2. . Wanted result: I want my container after the header to be under the infocontainers that is shown on both of the img. One of the soulutions i have thought of is to us margin and use Media Q to adjust the margin depending on screen size. Is there another soulution or a way of doing it that is better?

2 Replies

oscarthroedsson•14mo ago

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;
}

b1mind•14mo ago

https://web.dev/learn/css/z-index/

web.dev

Z-index and stacking contexts

In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context.

Gaming

Programming

Position:relative is confusing me