在 div 下隐藏图像

Posted 2023-02-21

【中文标题】在 div 下隐藏图像

【英文标题】：Hiding a image under the div

【发布时间】：2012-04-15 14:40:46

【问题描述】：

先看看这个截图：

那个白色盒子在橙色背景上，我希望它在它下面，与箭头所指的完全一样。其余的当然应该是可见的：它应该只是将其隐藏在橙色背景上。

这是橙色背景样式和白框本身：

橙色背景：

body 
    margin: 0;
    padding: 0;
    background: url("../img/back.png") repeat-x top #fff;
    text-align: left;
    color: #8a5225;

白盒：

#box 
    background: url("../img/box.png") no-repeat;
    width: 163px;
    height: 41px;
    float: right;
    position: relative;

希望您为此提供一些解决方案。我一直在尝试使用z-index，但它没有带来任何结果...

【问题讨论】：

你能设置一个fiddle吗？

橙色背景是back.png 附加到body?如果是这样，那是行不通的。您必须将其应用于 body 以外的元素才能在其下方获得一些东西。

这里是小提琴：jsfiddle.net/5bsty/2，我希望second div 位于橙色背景下，但同样它可以位于third div 下方。

【参考方案1】：

使用z-index，你应该完成.. 给橙色背景一个更高的 z-index

【参考方案2】：

根据您当前的 html 结构，您将无法执行此操作。 Z-index 仅适用于定位元素。即relative、absolute 或fixed。您将无法将这些应用到 body 元素。你可以试试，但是我试过了，还是不行。而是将橙色背景放入另一个 div 并在其下方绘制较低的背景。

http://jsfiddle.net/5bsty/

<div class="one">First div</div>
<div class="two">Second div</div>​

div.one 
    background: #c74d12;
    z-index: 3;
    position: relative;


div.two 
    position: relative;
    top: -10px;
    z-index: 1;
    background: white;

【讨论】：

背景是整个页面，所以你在小提琴中给出的html结构是错误的，我的结构现在看起来像这样：jsfiddle.net/5bsty/2，但我仍然想要second div放在first div 下，但不在third div 下。

@Cyclone - 我想我的回答不清楚。你不能这样做。我怎样才能让孩子在其父母之下？

+1。谢谢，但是没有解决方案吗？我只希望鼠标从橙色背景上向下滑动白色框...

抱歉，不能这样做。你不能把一个孩子放在它的父母后面。从语义上讲，它没有任何意义。为什么不直接改变你的 html 结构呢？最接近的是虚拟背景。您绝对定位一个 div，然后锚定顶部、左侧、底部、右侧的值为零。基本上和我的第一个答案一样。 jsfiddle.net/5bsty/4

【参考方案3】：

我觉得你是这样的

你需要两个 div 和父 div 定义相对位置，子 div 定义绝对属性，z-index 是强制性的。

css

div.one 
    background: #c74d12;
    position: relative;
    z-index:2;


div.two 
    position: absolute;
    top:11px;
    background: green;
    left:0;
    right:0;
    z-index:1;

​

HTML

<div class="one">First div</div>
<div class="two">Second div</div>​

查看现场演示http://jsfiddle.net/rohitazad/5bsty/3/

【参考方案4】：

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex

参考这个..:( ?

【讨论】：

朋友使用 z-index 有那么复杂吗：希望它是一个更好的解决方案；不要以冗长的方式编写代码。

您好查询，发布答案时最好不要只链接到第三方来源，而是提供一些解释。此外，SO 上的一群人讨厌 w3schools，一旦他们看到那里的链接，就会投反对票。烦人是的。只是避免投票的提示！