HTML – 负边际和背景

概述在下面的标记中,我只想设置.text div的负边距,使其显示在.image div的顶部. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text">text with background</div></div>.image { overflow: 在下面的标记中,我只想设置.text div的负边距,使其显示在.image div的顶部.

<div >    <div ><img src="imgage.jpg" /></div>    <div >text with background</div></div>.image {    overflow: hIDden;}.text{    background: green;    padding: 20px;    margin-top: -60px;    color: #FFFFFF;    overflow: hIDden;}

我已经设置了.text的背景,但由于某种原因它没有出现在图像上.仅显示文本.你可以在这里看到问题：http://jsfiddle.net/ovkn4egc/

如何在不使用绝对位置的情况下修复它.
谢谢.

解决方法 你可以简单地添加位置：相对;到文本

DEMO

* {    margin: 0;    padding: 0;}.image {    overflow: hIDden;}.image img {    display: block;}.text {    position:relative;    background: green;    padding: 20px;    margin-top: -60px;    color: #FFFFFF;    overflow: hIDden;}

<div >    <div >        <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />    </div>    <div >text with background</div></div>

总结

以上是内存溢出为你收集整理的HTML – 负边际和背景全部内容，希望文章能够帮你解决HTML – 负边际和背景所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。