切出css图像容器

Question

嗨，我正试图将两张图片放在一起，并让其中一张图像与另一张图像重叠。

我尝试过使用z-index属性，但这不起作用，除非我将position属性设置为fixed或absolute，这会弄乱我的网站布局。

我想知道虽然我有一个设置了宽度和高度的图像容器，但是我可以像矩形一样切出容器的一部分，让图像像我下面的图像一样位于切口内。

这可能吗？

谢谢！

Answer 1

position：元素相对于其正常位置的相对位置，并假装文档流，元素仍然存在。见这个例子：

http://jsfiddle.net/GtJMF/

position: relative;

Answer 2

我无法看到这种情况的position:absolute会如何搞乱您的网站。

将position:relative放在＆＃34;图像容器＆＃34;上。将position:absolute; right:0, bottom:0;放在＆＃34;剪切部分＆＃34; （假设它也在图像容器中）。这将为您提供您正在寻找的确切效果。

定位是相对于包含定位的父级。只需一个position:relative就可以使元素成为一个定位大师＆＃34;所有内部定位都将用于其坐标系。

Answer 3

position:relative也“启用”z-index，但与absolute和fixed不同，它不会弄乱任何其他布局。