How to position elements in the HTML using CSS?

Question

Okay, this is a very beginner question. But I'm a beginner, so it's nice ¯_(ツ)_/¯

I started in CSS recently, and to save my acknowledge inside my brain, I search for some exercises.

And I see this base HTML:

And the following challenge:

So, I don't lose time and make my own version, there go ma code:

.esqcima {
  background-color: red;
  height: 100px;
  width: 100px;
}

.esqbaixo {
  background-color: green;
  height: 100px;
  width: 100px;
  position: relative;
  top: 230px
}

.dircima {
  background-color: yellow;
  height: 100px;
  width: 100px;
  position: relative;
  bottom: 232px;
  left: 500px
}

.dirbaixo {
  background-color: blue;
  height: 100px;
  width: 100px;
  position: relative;
  left: 500px
}

<div class="esqcima">
  <p>Esquerda em Cima</p>
</div>

<div class="esqbaixo">
  <p>Esquerda em Baixo</p>
</div>

<div class="dircima">
  <p>Direita em Cima</p>
</div>

<div class="dirbaixo">
  <p>Direita em Baixo</p>
</div>

It works, but seems a little bit weird to me

You guys have a more simple way to do this? Thx for the attention :)

Answer 1

You could use a grid to do something similar.

body {
  display: grid;
  height: 800px;
  width: 100%;
  grid-template-areas: "red  yellow" "green blue";
}

div {
  height: 100px;
  width: 100px;
}

.esqcima {
  background-color: red;
  grid-area: red;
}

.esqbaixo {
  background-color: green;
  grid-area: green;
  justify-self: start;
  align-self: end;
}

.dircima {
  background-color: yellow;
  grid-area: yellow;
  justify-self: end;
}

.dirbaixo {
  background-color: blue;
  grid-area: blue;
  justify-self: end;
  align-self: end;
}

<div class="esqcima">
  <p>Esquerda em Cima</p>
</div>

<div class="esqbaixo">
  <p>Esquerda em Baixo</p>
</div>

<div class="dircima">
  <p>Direita em Cima</p>
</div>

<div class="dirbaixo">
  <p>Direita em Baixo</p>
</div>

Answer 2

positioning in CSS is actually very simple, there are multiple ways like position: static; for elements that will always stay in one position and aren't affected by anything position: relative; for elements that will be in their normal position till it's changed position: fixed; for elements that will stay the same even after you scroll position: absolute; for elements that will be positioned in relation to the nearest positioned element text-align: (center, left, or right); for text

NOTE: all can be modified with left, right, top, and bottom except static

Answer 3

So I'm not professional too but I'll share my solution with you.

so first you better put all the squares in one parent div, for much reasons, for example you controle them better, I'll explain later

my HTML code

    <div class="parentDiv">
    <div class="esqcima">
        <p>Esquerda em Cima</p>
    </div>
      
    <div class="esqbaixo">
        <p>Esquerda em Baixo</p>
    </div>
      
    <div class="dircima">
        <p>Direita em Cima</p>
    </div>
      
    <div class="dirbaixo">
        <p>Direita em Baixo</p>
    </div>
</div>

and here is my CSS code

*{
   margin: 0%;
   padding: 0%;
   box-sizing: border-box;
}
.parentDiv{
   width: 100%;
   height: 60vh;
   background-color: rgb(240, 240, 240);
   position: relative; 
}
.esqcima {
   background-color: red;
   height: 100px;
   width: 100px;
 } 

.esqbaixo {
  background-color: green;
  height: 100px;
  width: 100px;
   position: absolute;
   right: 0%;
   top: 0%;
 }

.dircima {
   background-color: yellow;
   height: 100px;
   width: 100px;
   position: absolute;
   bottom: 0%;
}

.dirbaixo {
  background-color: blue;
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: 0%;
  right: 0%;
}

so when you put them on a parent div and this parent div have a postion relative, you can put the position absolute for child divs (I'm sorry for my english level) then you can control them by using the percentage, as you see the green square for example have in css position: absolute; and right: 0% that mean the square will be in the right, and like that on other squares

good luck