2

Im playing around with the flex property and position and I have discovered something.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.mainContainer {
  margin: 10vh auto;
  width: 80vh;
  height: 80vh;
  /* display: flex; */
  justify-content: center;
  /* align-items: center; */
  border: 1px solid red;
  /* position: relative; */
}

.alterContainer {
  position: absolute;
  /* z-index: 1; */
  /* top: 0; */
  align-self: center;
  width: 50vh;
  height: 50vh;
  background-color: #ccc;
  border: 1px solid green;
}

.alterContainer1 {
  position: absolute;
  align-self: center;
  /* top: 0; */
  /* z-index: 1; */
  /* top: 0; */
  width: 25vh;
  height: 25vh;
  border: 1px solid green;
}
<div class="mainContainer">
  <div class="alterContainer"></div>
  <div class="alterContainer1"></div>
</div>

Thats the code.

I´ve noticed that when positioning a child position:absolute; and its parent is display: flex what happens is that the child is like the only element in the parent. It goes out-of-flow, it does not "interact" with the other flex-childs. When positioned absolute, the flex values given to the parent AFFECT this child, on his own.

Anyone has more info about this?

Thanks

biberman
  • 5,606
  • 4
  • 11
  • 35
zero0
  • 23
  • 1
  • 7
  • If you do `position: absolute;` on a flex-child element, it will still have flex-alignment until you give it `left`, `right`, `top`, `bottom`. Check this out: https://stackoverflow.com/questions/41033245/does-position-absolute-conflict-with-flexbox https://chenhuijing.com/blog/flexbox-and-absolute-positioning/ – Sigurd Mazanti Oct 20 '21 at 10:46

1 Answers1

1

in position : absolute case the element positions in relative to the nearest positioned ancestor (remember that flex is a display propery that makes the parent a block-level element) , so no there is no way to interact the absolute positioned child with other flex childs ( it can easily overlay them),

if you forced to position an element out of flex container , you can use postion: relative; to the child. because relative positioned element is relative to nearest block-level element.

Mohammad Esmaeili
  • 81
  • 6