css - 使用绝对定位覆盖所有包含的 div 的框阴影

标签 css

这是引用http://cssdesk.com/rHWcz

我想要做的是将其中一个 div 包含在框阴影下。我认为使用绝对定位可能会给我带来一些问题,但它必须是绝对定位。
哪个都无关紧要,但其中一个框 div 不能位于框阴影之上。
有任何想法吗?

最佳答案

为了解决这个问题,您可能需要解决一些问题。首先是您的 HTML 不明确/格式不正确:

<div class="out"><div class="left">
</div>
<div class="right"></div>

我的假设是你真正的意思是:
<div class="out">
 <div class="left"></div>
 <div class="right"></div>
</div>

(您错过了结束语 </div>)

修复此问题后,最简单的解决方案实际上是将阴影从底层标签( .out div )中拉出,而是将阴影创建为叠加层。

例子:
<div class="out">
 <div class="left"></div>
 <div class="right"></div>
 <div class="shadow"></div>
</div>

完成此操作后,您可以轻松放置 .left.right <div>元素放在你想要的地方,然后强制 .shadow div出现在顶部。

考虑以下 CSS(我还对您的 CSS 进行了一些标准化以减少重复):
.out, .shadow {
  height: 600px; width: 600px;
}
.out {
  background-color: AliceBlue;
  position: relative;
}
.shadow {
  background: transparent;
  -webkit-box-shadow: inset 0px 0px 5px 5px ;
  box-shadow: inset 0px 0px 5px 5px;
  position: absolute; top: 0; left: 0;
}
.left, .right {
  height: 100px; width: 100px;
  bottom: 0;
  position: absolute;
}
.left {
  background-color: green;
  left: 0; 
}
.right {
  background-color: red;
  right: 0;
}

因为.shadow div最后出现,你不需要任何特殊的z-order为了让它出现在顶部。

Here is a working cssdesk以在行动中展示它。

编辑:

正如评论中提到的 - 原始问题实际上只要求两个框之一出现在 box-shadow 下。 .如果您希望其中一个出现在其上方,只需移动该框的 HTML 标签,使其出现在 .shadow 之后。 <div> , 像这样:
<div class="out">
 <div class="left"></div>
 <div class="shadow"></div>
 <div class="right"></div>
</div>

这将导致 .right框(红色的)出现在阴影上方,而不是下方 - 不需要任何 z-index肮脏。

我已更新 cssdesk 示例以显示此版本。

关于css - 使用绝对定位覆盖所有包含的 div 的框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16198745/

相关文章:

css - rails : How do you associate a stylesheet to a layout?

html - 无法强制网站适应屏幕宽度

html - 使用从右到左的语言显示引导弹出框

javascript - 单击时显示和隐藏 div

css - 使用 CSS 进行 Selenium 测试识别元素是否具有 rel ="nofollow"属性

html - 访问与CSS级别相同的CSS类

javascript - 将当前类添加到自动图像转换器

javascript - 如何增加JavaScript字幕到网站的大小?

html - 如何模拟Google Apps模式?

html - calc (100% - 300px) 在 Safari 上工作,而不是 Firefox 或 Chrome