Javascript HTML DIV上DIV内DIV

我正试图为我的一个项目制作一个可扩展的幻灯片，我一直在设计我的div的样式，以便像我期望的那样出现

我有一个可以容纳另外两个div的div容器：一个阴影div和一个bgimgdiv

<div class="container" id="container">
     <div class="shadow"></div>
     <div class="bgimg"></div>
</div>​

.container {
    width:   81px;
    height:  500px;
    background-color: red;
    overflow: hidden;
}

.bgimg {
    width:   300px;
    height:  100%;
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top;
}

.shadow {
    width:   100%;
    height:  100%;
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top;
    position: relative;
}

​
.集装箱{
宽度：81px；
高度：500px；
背景色：红色；
溢出：隐藏；
}
.bgimg{
宽度：300px；
身高：100%；
背景：url（“http://www.jbraccini.com/files/bg.jpg）无重复左上；
}
.影子{
宽度：100%；
身高：100%；
背景：url（“http://www.jbraccini.com/files/container-shadow.png）右上方无重复；
位置：相对位置；
}

• #bgimgdiv用于保存幻灯片将显示的实际图像

• #container div overflow属性已设置为hidden，还设置了宽度和高度；后来，通过javascript和我计划检测mouseover（hover）和mouseout事件，以便扩展它并以更大的视角显示图像

• #shadow div计划位于#bgimg上方（在同一位置，但具有更高的z索引），并且将有一个右上对齐的透明png（图像）作为背景图像，以模拟#容器内部阴影，因此幻灯片看起来（从视觉上讲）以某种方式嵌入到页面主体上

最终的结果是，改变#容器宽度，它也会改变#阴影宽度，因为它的宽度设置为100%，因此，当#bgimg被揭开时，它会将阴影定位到右上方

我显然没有达到这样的结果：D #影子div停留在#bgimg上方，将其推至底部。我试图设置#阴影位置：绝对；但是我不想通过代码改变阴影属性，如果可能的话，我想找到一个css解决方案

为了便于理解，我在这里创建了一些示例：

最终的结果应该是这样的：

无论如何，我希望有人能启发我

致以最良好的祝愿

试试这个：

.container {
    width:   300px;
    height:  500px;
    background-color: red;
    overflow: hidden;
    position:relative;
}

.bgimg {
    width:   300px;
    height:  100%;
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top;
}

.shadow {
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top;
    position: absolute;
    z-index:2;
}

---

​

我不太明白。你希望阴影出现在图像的顶部，而现在它出现的背景是红色的，而不是实际的图像？有点像。红色背景是实际的#容器背景色。图像出现了，但由于溢出了#容器的大小，图像被隐藏了起来，并且由于#阴影在其底部推动#bgimg，因此无法看到图像。我希望#shadow和#bgimgdiv位于相同的位置（比如说，左：0；上：0；），但如果为了这样做而将它们设置为position:absolute，它们可以避免溢出：hidden；太棒了，这正是我想要的。我最好阅读更多关于CSS定位的内容。谢谢