@media查询和＆＃34;左：x％＆＃34;在@media中应用@width定义的％而不是浏览器/父元素宽度

Question

我正在使用bootstrap来实现响应式网页设计。我正面临着申请＆＃34;离开＆＃34;财产为％。我发现，不是采用浏览器总宽度的百分比，而是采用@media宽度定义的百分比，这实际上打破了应用程序的响应性。

.image-container {
  width: 173px;
  top: -69px;
  left: 50%;
  margin-left: -86px;
  max-width: 336px;
  overflow: hidden;
  position: absolute;
}
@media (min-width: 660px) {
  .image-container {
    left: 63%;
  }
}
@media (min-width: 831px) {
  .image-container {
    top: -91px;
    left: 80%;
    width: 30%;
  }
}
@media (min-width: 1280px) {
  .image-container {
    left: 85%;
  }
}

我找到了以下

1. At >1280 width, left=1280*.85 is used
2. At > 831, left=831*.80 us used
3. At > 660, left=660*.63 is used

以下是HTML标记代码段

<div class="bottom-section">         
        <div class="parent-container">                        
            <div class="image-container">
                <img class="card-art"  src="/img/application/cardarts/thumbnails/img.png"> 
            </div>
        </div>        
    </div>

以下是父容器css

.parent-container {
  padding-left: 0;
  width: 100%;
  padding-top: 68px;
  max-width: 970px;
  margin: 0;
  position: relative;
}
@media (min-width: 660px) {
  .parent-container {
    padding-top: 20px;
  }
}

这对我来说是一个令人惊讶的行为。我的理解是，left = x％应该找到父元素并应用％。我是媒体查询新手，并使用bootstrap来实现响应式网页设计。

以下是a fiddle。