I don't understand positioning of elements - Learn Intermediate CSS by Building a Picasso Painting

Hi,

I am working on Responsive Web Design - Intermediate CSS by Building a Picasso Painting challenge. It’s easy to progress through steps as most of them are just coping the code. But I struggle with understanding why are the elements in the place they are?

Here is an example:

.black-dot {
  width: 10px;
  height: 10px;
  background-color: rgb(45, 31, 19);
  border-radius: 50%;
  display: block;
  margin: auto;
  margin-top: 65%;

Why are the black dots in the place they are? I tried changing margin-top to 50% and other values but I still don’t understand it. This is just a simple example.

Where and how can I learn more about positioning? Does anyone have any good interactive resources ( I can’t find any)? I feel I don’t get enough practice on FCC and the challenges are too prescriptive. Just reading about these topics on sites such as Mozilla Developer is just that - reading. I still don’t understand a thing.

Or is it magic :grinning: :woman_mage: ?

Silvia

The CSS Position Property (scrimba.com)