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

HTML-CSS
1

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

Picasso Painting
Picasso Painting789×792 3.23 KB

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

2

The CSS Position Property (scrimba.com)

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.