[英]Overlaying divs on responsive parent div with background image
我想要实现的是一个具有响应能力的div容器,但能够基于父div覆盖将保留在同一位置的突出显示字段。 我希望能够突出显示文本或表单字段的某些区域,但表单要具有响应性。 这是一个示例的链接: http : //www.codeply.com/go/nufYSSEMir
如您所见,高亮div是position:absolute; 所以很明显它将保持原样。 我尝试使用百分比作为顶部和左侧的值,但它不会随着背景图像缩放。 我有两种感觉,要么将宽度设置为静态值,然后将元视口设置为缩放至窗口大小,要么对某些JS和jQuery感到迷惑。
在此先感谢您提出任何建议。
只需添加position: relative;
到#outerContainer
,它对我#outerContainer
。
正如divix所说,您需要position : relative
对于父div设置position : relative
。 这将告诉浏览器您的突出显示position : absolute
是相对于externalContainer而言的绝对值。
基本上任何position:absolute
都会查看具有位置设置(无论是相对的,固定的,绝对的等)的第一个父对象,以计算上下偏移量。 如果您没有任何设置位置的父母,它将仅以身体作为参考
编辑:为了获得正确的响应度,请尝试以下操作:
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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.