HTML DIV 上面 DIV 里面 DIV

Posted 2023-02-25

【中文标题】HTML DIV 上面 DIV 里面 DIV

【英文标题】：HTML DIV above DIV inside DIV

【发布时间】：2012-12-06 20:08:42

【问题描述】：

我正在尝试为我的一个项目构建一个可扩展的幻灯片，但为了按预期显示我的 div 样式时卡住了。

我有一个 div #container，它可以容纳另外两个 div：一个 #shadow div 和一个 #bgimg div。

<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;

#bgimg div 用于保存幻灯片将显示的实际图像。

#container div 溢出属性已设置为隐藏，还有宽度和高度；后来，通过javascript，我计划检测mouseover(hover)和mouseout事件，以扩展它并以更大的视角显示图像。

1234563为了模拟 #container 内部阴影，因此幻灯片似乎（从视觉上讲）以某种方式物理嵌入页面主体。

最终的结果是改变#container 的宽度，它也会改变#shadow 的宽度，因为它的宽度设置为 100%，所以它会在 #bgimg 运行时将阴影定位到右上角未发现。

我显然没有达到这样的结果 :D #shadow div 保持在#bgimg 上方，将其推到底部。我试图设置#shadow position: absolute;但我希望不必通过代码更改#shadow 属性，如果可能的话，我想为此找到一个 css 解决方案。

为了便于理解，我在这里创建了一些示例： http://jsfiddle.net/jbraccini/jyuKL/8/

最终的结果应该是这样的： http://www.jbraccini.com/files/final.jpg

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

最好的问候！

J

【问题讨论】：

不太确定我是否理解。您希望阴影出现在图像顶部，现在它显示为红色背景而不是实际图像？

有点。红色背景是实际的#container 背景颜色。图像出现了，但它被隐藏了，因为它超出了#container 的大小，并且由于#shadow 将#bgimg 推到它的底部，所以它看不到。我希望 #shadow 和 #bgimg div 位于同一位置（比如说，left:0; top:0;）但是如果我将它们设置为 position: absolute 以便这样做，它们会避免溢出：隐藏；

【参考方案1】：

试试这个：

.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;

​

【讨论】：

太棒了，这正是我想要的。我最好阅读更多关于 CSS 定位的信息。谢谢！