Question

我想要实现的是一个div容器，它具有响应能力，但能够覆盖突出显示基于父div保持在同一位置的字段。我希望能够突出显示文本或表单字段的某些区域，但使表单具有响应性。这是指示示例的链接：http://www.codeply.com/go/nufYSSEMir

正如你所看到的，高亮div是position：absolute;很明显，它会准确地停留在它所处的位置。我尝试使用百分比作为顶部和左侧值，但它不会与背景图像一起缩放。我有一种感觉，我的两个选择是将宽度作为静态值，并将元视口设置为缩放到窗口大小，或者对某些JS和jQuery感到疯狂。

提前感谢任何和所有建议。

Answer 1

只需将position: relative;添加到#outerContainer，它就适用于我。

Answer 2

正如divix所说，你需要将position : relative设置为父div。这将告诉浏览器您的突出显示position : absolute是对outerContainer的绝对引用。

基本上任何position:absolute都会查看具有位置集的第一个父级（无论是相对的，固定的，绝对的等）来计算top | right | bottom | left offset。如果您没有任何设置了职位的父母，则只需将该身体作为参考

编辑：为了获得正确的响应，请尝试以下操作：

body {
    background-color:#ddd;
}

#outerContainer {
    background: transparent url("http://scontent-ord1-1.xx.fbcdn.net/hphotos-xpl1/t31.0-8/s960x960/12605534_504076036438839_6108375615162000201_o.jpg") no-repeat scroll center top / 100% auto;
    height: 960px;
    margin: 0 auto;
    max-width: 742px;
    width: 100%;
    position: relative;
}
@media only screen AND (max-width:742px){
   #outerContainer {
       height:0;
       padding-top:129.5%;
   } 
}

#innerContainer {
    background-color: rgba(0, 255, 0, 0.5);
    border: 1px solid #000;
    height: 8%;
    left: 12%;
    position: absolute;
    top: 14%;
    width: 30%;
}

在背景图像上覆盖响应父div的div

2 个答案: