html - 切出 css 图像容器

Question

嗨，我正在尝试将两张图片并排放置，并让其中一张与另一张重叠在一个角落里。

我尝试使用该z-index属性，但这不起作用，除非我将位置属性设置为固定或绝对属性，这会弄乱我网站的布局。

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

这可能吗？

谢谢！

Answer 1

position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:

http://jsfiddle.net/GtJMF/

position: relative;

Answer 2

我看不出有position:absolute这种情况会如何搞砸您的网站。

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

定位是相对于包含定位的父级的。只需 aposition:relative就足以使元素成为所有内部定位将用于其坐标系的“定位大师”。

Answer 3

position:relative也 "启用" z-index，但不同的是absolute，fixed它不会弄乱布局的其余部分。