设置position与z-index后图片width属性失效的问题

嘿，我知道这个问题卡在哪了！当你给前两个section（#title和#features）添加position和z-index后，你的title-image的宽度参考对象悄悄变了，导致width:60%不再按你预期的方式工作。

问题根源 #

你的title-image设置了position:absolute，绝对定位元素的百分比宽度是相对于最近的设置了非static定位的祖先元素计算的：

• 没加section的position属性时，title-image的最近定位祖先不存在，它的宽度参考初始包含块（视口），但因为它放在.col-md-6里（占容器50%宽度），视觉上刚好符合你要的60%效果；
• 当给#title加上position:relative后，#title变成了title-image的最近定位祖先，此时width:60%就变成了#title（全屏宽度）的60%，图片自然就变大了。

快速解决方案 #

给包含title-image的那个.col-md-6容器添加position:relative，让title-image的宽度计算重新基于这个父容器：

步骤1：修改CSS

在你的样式表中添加：

.title-img-wrapper {
  position: relative;
}

步骤2：修改HTML

给包含手机图片的col容器加上这个类：

<div class="col-md-6 title-img-wrapper">
  <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>

这样一来，title-image的width:60%就会基于.col-md-6的宽度计算，完美还原你最初想要的效果，同时也不影响你给section设置的position和z-index属性。

替代方案（无需新增类） #

如果你不想加新类，也可以直接通过CSS选择器定位到这个容器：

#title .row .col-md-6:last-child {
  position: relative;
}

这样同样能达到目的，而且不用修改HTML结构。

内容的提问来源于stack exchange，提问作者Montek