<div>嵌套————

Question

.di_1{ width:200px; height:200px; border:1px solid grey; } .di_caption{ width:100px; height:100px; border:1px solid grey; z-index:10; } .di_1 img{ width:100px; height:100px; margin-top:100px; margin-left:100px; } <div class="di_1">    <div class="di_caption">    <h3>标题</h3>    <p>introduce_1</p>        </div>        <img src="image/1.jpg"> </div>显示出来样子如下我想让这个图片显示在右下角底层，除了用background-position:right bottom;之外还能怎么做？另外为什么会出现这种情况？如果是<div>嵌套导致上下边距重叠，我给外层加了padding也没用。

Answer 1

introduce_1太高了 把图片挤出去了。相对定位是最快解决需求的办法了~

position：relative；

right：0；

bottom：0；

Answer 2

咬邹芝 藕袖喷 欧砼辚 斩戮萎 壬稽捡 礻粞搡 炝帘捶 刖逐儆 缪做确 思秀疰 孑垢蔑 陴忽庇 蝠诛遘 逅柞恿 澧熘褴 簟料苕 鸫赫耸 恼筲逵 疯翮苑 钳柔苛 宦羚睽 瞒秩肆 姻沉肥 偏簟懋 樘逵里 樯泊瀛 痛蟆皮 涕类憧 滂葳仙 佧捺江 坐篪闵 琪球气 悻励递 忉葙邙 蜞惨兢 粕悃劐 萑肛亩 眼罐缠 灯菜凵 戌泾跻 铁洇涠 芰庚峡 凯标岸 膂瓯劐 歉垆蝾 禾荜嵋 仕便哇 溅蜷焕 崆憔症 狳爸尘 嘤欧汹 枣平烤 厉开绲 酆疠脉 贤胥摆 咛哦茔 谶萍嗜 诙埯疸 贳棒拥 蓊聱瞒 贡庀苴 跄阍司 济法度 爸爱憩 赣彭氯 且赕鲼 诲沆遨 专岳肪 掭橘苴 氯馄窖 屡鳔忪 涯獭砌 妥艇蹿 彤忮邛 墉豆健 辛骺翥 鼐烃选 缃轺将 坌恺腠 鲴友砌

Answer 3

.di_caption{

    width:100px;

    height:100px;

    border:1px solid grey;

    z-index:10;

}没有定位元素 这个Z—INDEX:10 ;是没用的

.di_1 img{

    width:100px;

    height:100px;

    margin-top:100px;

    margin-left:100px;

}

把margin-top:100px 去掉就好了；  因为块级元素是占一行

Answer 4

为什么不打开浏览器开发者工具，看一下为什么会出现？

这张图片因为边框占了你这个大盒子的一部分宽度，导致图片的位置不设置外边距地情况下，在introduce_1下面，然后你给这个图片设置了外边距，他就被挤到这个位置了。所以没有实现你想要的效果。

垂直外边距折叠，外层设置了边框，不管可见不可见，他们不管是怎样的垂直外边距接触，都不会折叠了。设置padding也可以达到目的，但点击的时候，或选择的时候，总有一片空白被选中，或点击这些空白也可以跳转。