css - box shadow覆盖所有包含的div使用绝对定位 [英] css - box shadow covering all contained divs using absolute positioning

问题描述

以下是 http://cssdesk.com/rHWcz 参考资料

我想要做的是将一个div包含在框阴影下。我认为使用绝对定位可能给我一些问题，但它必须绝对定位。
无论哪一个，但是盒子div之一不能放在盒子阴影的顶部。
任何想法？

解决方案

有些问题可能需要解决才能解决。第一个原因是您的HTML模糊不清/形成不佳：

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

我的假设是你真正的意思是：

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

（您缺少一个关闭< / div> ）

有了这个固定的，最简单的解决方案是拉下底层标签的 c> .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 以使其显示在顶部。

这是一个工作的cssdesk

如评论中所述 - 原始问题实际上只要求在 box-shadow 下下面出现两个框中的一个。如果您希望其中一个显示在 之上，只需移动该框的HTML标签，即可在 c> < div> ，如下所示：

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

这将导致 .right 红色的一个）出现在阴影之上 而不是下面 - 不需要任何 z-index
$ b

我更新了cssdesk示例来显示此版本。

Here's a reference http://cssdesk.com/rHWcz

What I'm trying to do is have one of the div's contained be under the box shadow. I think using absolute positioning might be giving me some problems, but it has to be absolute positioned. It doesn't matter which one, but one of the box div's cannot lay on top of the box shadow. Any ideas?

解决方案

There are a few problems which you might want to resolve in order to fix this. The first is that your HTML is ambiguous / poorly formed:

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

My assumption is that what you really mean is:

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

(You were missing a closing </div>)

With this fixed, the easiest solution is actually to pull the shadow out of the underlying tag (the .out div), and instead create the shadow as an overlay.

Example:

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

With this done, you can easily place the .left and .right <div> elements where you want them, and then force the .shadow div to appear on top.

Consider the following CSS (I also normalized your CSS some to reduce repetition):

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

Because the .shadow div appears last, you don't need any special z-order in order to get it to appear on-top.

Here is a working cssdesk to demonstrate it in-action.

Edit:

As mentioned in the comments - the original question actually asks for only one of the two boxes to appear under the box-shadow. If you want one of them to appear above it, simply move that box's HTML tag so that it appears after the .shadow <div>, like this:

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

This will cause the .right box (the red one) to appear above the shadow, rather than below - without the need for any z-index nastiness.

I have updated the cssdesk example to show this version instead.

这篇关于css - box shadow覆盖所有包含的div使用绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！