Element disappears as soon as I make its position absolute-CodePudding

I'm trying to place .blob at a particular position inside a container behind an image.

The blob shows up in the container quite fine but as soon as I make it position: absolute, the blob disappears. The container position is relative and the image position is absolute:

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

html,
body {
  height: 100%;
}

@media only screen and (max-width: 480px),
screen and (max-height: 900px) {
  .landing {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #F8D0B0;
  }
  .landing img {
    position: absolute;
    max-width: 90%;
    height: auto;
    bottom: 13%;
    right: 6.5%;
  }
  .blob {
    Position: absolute;
    bottom: 10%;
    max-width: 90%;
    height: 40.5%;
    background-color: #88D8B8;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    z-index: -2;
  }
}

<div >
  <img src="people.png" alt="">
  <div >
  </div>
</div>

CodePudding user response：

As Lee Taylor mentioned in their comment, use a fixed width and higher z-index.

Your div had a width of auto, and because it had no content that meant zero width - max width will not get it to be that width, think of max-width more like a cap on how wide it can get.
lower z-index values send an element back into the screen and higher values pull it closer toward you

I try and keep my CSS at as few lines as possible so it's easier to diagnose problems like this.

You rarely have to explicitly define height: auto for example. And declaring width: 100% on a block-level element such as a div does nothing because it's already set to auto when you do nothing, and that takes up the full width by default.

With your media queries, aim to use min-width and min-height instead, and add in layout complexity on larger screens, rather than having bespoke small screen width styles

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

html,
body {
  height: 100%;
}

@media only screen and (max-width: 480px),
screen and (max-height: 900px) {
  .landing {
    height: 100%;
    background-color: #F8D0B0;
  }
  .landing img {
    position: absolute;
    max-width: 90%;
    bottom: 13%;
    right: 6.5%;
  }
  .blob {
    position: absolute;
    bottom: 10%;
    width: 90%;
    height: 40.5%;
    background-color: #88D8B8;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
  }
}

<div >
  <img src="http://source.unsplash.com/random/100x100" alt="">
  <div >
  </div>
</div>

CodePudding user response：

Once you set the position of the element to absolute, the "max-width" property no longer works properly. Instead of using max-width:90% in the css, you should just use `width:90%". Also, setting the element's position to absolute makes the z-index css property affect the element. Since the z-index of the blob is -2 while the z-index of the element with class landing is 0 by default, the element will not render in the body. Try the code below:

CSS:

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

html,
body {
  height: 100%;
}

@media only screen and (max-width: 480px),
screen and (max-height: 900px) {
  .landing {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #F8D0B0;
  }
  .landing img {
    position: absolute;
    max-width: 90%;
    height: auto;
    bottom: 13%;
    right: 6.5%;
  }
  .blob {
    Position: absolute;
    bottom: 10%;
    max-width: 90%;
    height: 40.5%;
    background-color: #88D8B8;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    z-index: -2;
  }
}

HTML:

<div >
  <img src="http://source.unsplash.com/random/100x100" alt="">
  <div >
  </div>
</div>