HTML CSS – 重叠标题图像

位置：绝对

您可以为图像或图像的包装器提供position：absolute的属性,并为其容器(在您的示例中为绿色框)提供位置：relative.然后你应用top：-100px或者左边的左边属性：100px或者其他什么.这样可以使图像不流动,与左边对齐并偏移100px,并从绿色容器顶部偏移100px.这种方法的缺点是绿色容器中的任何物体内容都可能出现在图像下方.

位置：相对

这与第一个方法相同,但图像在文档中的流动方式除外.而不是给图像位置：绝对,你会给它位置：相对.相对的工作与绝对不同.而不是父容器的x和y坐标,它只是移动了多少你作为顶部和左边的值.因此,在这种情况下,您将应用top：-100px并将其他方向值保留为默认值.这会将您的元素移动该数量,但也会在文档流程中留下原始位置.因此,您最终会在其他内容流动的图像下方留下空隙.

负利润率

老实说,在你的情况下,我更喜欢这种方法.在此方法中,您可以为图像提供负边距(例如,margin-top：-100px).这将偏移图像,折叠图像下方的区域,并且它仍将保留文档中的一些流.这意味着绿色容器的内容将围绕图像流动,但仅在仍在容器内部的部分周围流动.内容会像相对定位一样流动,但它也不会像绝对定位那样完全将图像从流中取出.但是,要记住的一件事是,如果您尝试使用除初始值之外的任何类型的溢出,它将对您的图像造成不良影响.

演示

这是一个快速的小演示,演示了一个简单用例中的所有三种方法：http://jsfiddle.net/jmarikle/2w4wqfxs/1