Problem with element positioning

Tell us what’s happening:

  1. Both margin:auto; and offset properties left and right have been used. Why? Doesn’t the offset properties overwrite the margin CSS?

  2. Since there is no closest positioned ancestor, will the absolute positioning be done according to body? Also, why is the div element centered vertically?

Your code so far


<style>
.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-radius: 0px;
  box-shadow: 25px 10px 0px 0px green;
}

</style>
<div class="center"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0.

Challenge: Create a Graphic Using CSS

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-a-graphic-using-css

Hey @Ishaan, welcome for forum!

I’ll try to break it down for you as far as my knowledge allows me

No. It will be positioned relative to :root block, which is html

Properties top, bottom, left, right set containing block, meaning where on the screen div might be positioned, sort of boundaries. Properties width and height set actual dimensions of the div (otherwise browser will assume you want fill whole containing block)

margin: auto; sets equal margins from all the sides, meaning distances from div to top, bottom, left, right are equal. This effectively position div in the center of containing block.

Thank you for answering, Igor.

margin: auto; centers the element horizontally within its container (source). So the vertically center alignment makes no sense.
And since we have already centered it horizontally, left and right make no sense?

Another confusion is that why both top and bottom & right and left have been used? Wouldn’t just using of the two, e.g. top & right, make sense?

Lastly, value of all offset properties (top, right, bottom and left) is zero. What does that signify?

There is a similar thread on stack overflow but i am unable to understand their explanations.

Did you read the explanation given in the smashing magazine article that is linked to in the Stack Overflow thread?

Side note, there seems to be some weird overflow going on in Chrome on that article. It looks fine in Firefox (I didn’t really bother to figure out what is happening, but I wrote them a message).

@lasjorg Thank you for answering. I did read it. But the following part doesn’t make sense:

Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container.

Is this something that i need to accept or is there an explanation behind the new bounding box?

Even in the next FCC challenge positioning is done as follows:
.heart::after {
background-color: blue;
content: “”;
border-radius: 25%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
Why are we writing top:0px; if we don’t require it to move away from top.

@snigo I came across this: However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. (source)

OK, how about analogy then?

  1. You have football field with dimensions: width: 100vw; height: 100vh;.
  2. You want to place a ball with dimensions width: 100px; height: 100px; that is absolute positioned, meaning it’s not respecting positioning rules of the field and could be placed anywhere on it.

I say, @Ishaan, place it in a way such as corresponding sides of the ball and field were touching with following offsets:

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

You say, “It’s not possible, as ball is smaller than field”

I say: "Use margin: auto;"
QUESTION: Is this enough information for you to place a ball?