M
M
Meekwest2022-04-18 11:41:46
css
Meekwest, 2022-04-18 11:41:46

How to make an inverted block?

There is a main screen on the project. The header lies on top of the picture. The left column similarly lies on top of everything. How can I stack them on top of each other?
625d235ea1620465567129.png

<div>
      <Header className={styles.header} />
      <div className={styles.image_sidebar_block}>
        <div className={styles.sidebar}>
          <Button color="black">Регистрация</Button>
          <Logo />
        </div>
        <div className={styles.image}>
          <Image
            className={styles.main_image}
            src={mainPage}
          />
        </div>
      </div>

      <Footer />
    </div >


.header {
  z-index: 1;
  position: absolute;
  width: 100%;
}


.sidebar {
  position: absolute;
  width: 100px;
  height: 699px;
  left: 0px;
  top: 0px;
  z-index: 1;
  background: var(--light-gray);
}


I get:
625d24130aad3047752900.png

Answer the question

In order to leave comments, you need to log in

2 answer(s)
W
wadowad, 2022-04-18
@wadowad

Lay out the sidebar first without turning. Swap the width and height values. Then rotate 90 degrees counterclockwise with transform: rotate . Position the center of rotation to the right place with transform-origin.

F
Froggyweb, 2022-04-18
@Froggyweb

you can also do this: https://developer.mozilla.org/en/docs/Web/CSS/writ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question