1

I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.

However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.

I read the mdn docs for this...but perhaps I am not understanding the wording?

Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left. 

html, body {
  height: 100%;
  width: 100%;
}
.container {
  height: 500px;
  width: 500px;  
  border: 1px solid black;
  position: relative;
}
.box1 {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  margin: auto;
}
.box2 {
  height: 100px;
  width: 100px;
  background: red;
  position: absolute;
  margin: auto;
}
<div class='container'>
  <div class='box1'>
  </div>
  <div class='box2'>
  </div>
</div>
WonkasWilly
  • 563
  • 1
  • 8
  • 21
  • absolute is a weird one to work with - I don't know the ins and outs, but MDN does - https://developer.mozilla.org/en-US/docs/Web/CSS/position – treyBake Mar 02 '18 at 16:47

0 Answers0