My img element won't overlap its parent's parent div?

StackOverflow https://stackoverflow.com/questions/20618000

  •  02-09-2022
  •  | 
  •  

Pregunta

My website is set up like this:

<html lang="en">
  <body>
    <div id="container">
      <div id="contentainer">
         <img src="img/car.png" alt="car.png" syle="position: absolute; top:10px; left:-35px; ">
         <div id="contentLeftTop"> ... </div>
         <div id="contentRightTop"> ... </div>
         <div id="contentLeftBottom"> ... </div>
      </div>
    </div>
  </body>
</html>

And the CSS that's tied to the involved elements: 

#container {
  position:relative;
  margin:auto;
  width:820px;
  overflow:hidden;
  z-index:-1;
}
#contentainer {
  position:relative;
  float:left;
  width:800px;
  background-color:#FFF;
  border:10px groove #999;
  border-radius:15px;
  z-index:1;
}

What seems to be happening is the image gets cut-off due to width constraints of the parent "container" div, but it successfully overlaps the "contentainer" div. What am I doing wrong? I'm trying to stick the car.png to the front of the page.

Thanks in advanced.

¿Fue útil?

Solución

The problem isn't the width constraints, it's overflow:hidden; in the style for #container. By definition, this means that anything that would extend outside of #container gets cut off.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top