[英]Overlaying divs on responsive parent div with background image
What I'm trying to achieve is a div container that is responsive but the ability to overlay highlight fields that will stay in the same place based on the parent div. 我想要实现的是一个具有响应能力的div容器,但能够基于父div覆盖将保留在同一位置的突出显示字段。 I want to be able to highlight certain areas of text or form fields but have the form be responsive.
我希望能够突出显示文本或表单字段的某些区域,但表单要具有响应性。 Here's a link to an example: http://www.codeply.com/go/nufYSSEMir
这是一个示例的链接: http : //www.codeply.com/go/nufYSSEMir
As you can see the highlight div is position: absolute; 如您所见,高亮div是position:absolute; so obviously it's going to stay exactly where it's at.
所以很明显它将保持原样。 I've tried using percents as top and left values but it doesn't scale with the background image.
我尝试使用百分比作为顶部和左侧的值,但它不会随着背景图像缩放。 I have a feeling that my two options are to either have the width as a static value and set the meta viewport to scale to the window size, or get crazy with some JS and maybe jQuery.
我有两种感觉,要么将宽度设置为静态值,然后将元视口设置为缩放至窗口大小,要么对某些JS和jQuery感到迷惑。
Thanks in advance for any and all suggestions. 在此先感谢您提出任何建议。
Simply add position: relative;
只需添加
position: relative;
to the #outerContainer
, it works for me. 到
#outerContainer
,它对我#outerContainer
。
As said by divix, you need to set position : relative
to the parent div. 正如divix所说,您需要
position : relative
对于父div设置position : relative
。 This will tell the browser that your highlight's position : absolute
is absolute in reference to outerContainer. 这将告诉浏览器您的突出显示
position : absolute
是相对于externalContainer而言的绝对值。
Basically any position:absolute
will look at the first parent that has a position set (whether it's relative, fixed, absolute etc) to calculate top|right|bottom|left offset. 基本上任何
position:absolute
都会查看具有位置设置(无论是相对的,固定的,绝对的等)的第一个父对象,以计算上下偏移量。 If you don't have any parent that has a position set, it will just take the body as a reference 如果您没有任何设置位置的父母,它将仅以身体作为参考
Edit: In order the get the right responsivness try this : 编辑:为了获得正确的响应度,请尝试以下操作:
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.