Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Is there a CSS position property that allows child elements to ignore their parent elements' positioning?

Let’s assume we have a parent element whose dimensions are 100vh x 100vw. If that element were to have a child and that child’s position was set to ‘fixed’. The child would be in the center of the element

  .parent {
    height: 100vh;
    width: 100vw;
    border: solid 5px orange
  }

  .child {
    height: 6vh;
    width: 6vh;
    postion: fixed
   <!-- extra styling ...!>
  }

enter image description here

Now let’s say that the parent div’s height needs to be 180vh in order to fit child elements, now because that one ‘fixed’ child is positioned at the center of the div. It will move down, because it’s position to be at the center of the parent and not the view port.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

So is it possible to keep the child element centered to the viewport and ignore its parent without nesting it outside of the parent? Maybe some kind of CSS positioning property?
I don’t want to use margins or transform properties. I want a way for the element to IGNORE it’s parent’s positioning without nesting it outside.

>Solution :

body,
html {
  margin: 0;
}


.parent {
  height: 180vh;
  width: 100vw;
  background: orange;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.child {
  height: 6vh;
  width: 6vh;
  background: red;
  position: fixed;
  top: 50%;
  margin-top: -3vh;
}
<div class="parent">
  <div class="child">
  </div>
</div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading