当第一个里面有绝对定位时,如何让外部 div 正确堆叠?
How do I get outer divs to stack properly when there is absolute positioning inside the first one?
我对如何让这些 div 以我希望的方式堆叠感到困惑。我无法让主要内容div(.innerdiv2
)堆叠在第一个headerdiv(.innerdiv1
)下面那个has/involves绝对定位(以便一张图片在另一张图片之上)。
我还需要避免在图像上使用固定高度。这是我在搜索相关帖子和解决方案时发现最多的建议。但我不希望那个(固定高度)锁定在页面上第二个 div 开始的位置。如果屏幕尺寸缩小,那么我希望两个 header 图像按比例缩小,这意味着它们的高度会降低,第二个 div 应该开始更高,这就是我不想的原因使用固定高度。这可能吗?
这是我正在使用的代码:
.maindiv {
position: relative;
}
.innerdiv1 {
max-width: 975px;
width: 100%;
}
.imgbg {
position: absolute;
z-index: 102;
max-width: 975px;
width: 100%;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
}
.innerdiv2 {
position: relative;
width: 100%;
}
.tbl1 {
width: 100%;
max-width: 975px;
" border="0" cellpadding="0" cellspacing="0;
}
.imgfooter {
width: 100%;
max-width: 975px;
position: relative;
cursor: pointer;
}
<div class="maindiv">
<div class="innerdiv1">
<img class="imgbg" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
<img class="imglogo" src="data:image/jpeg;base64,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">
</div>
<div class="innerdiv2">
<table class="tbl1">
<tr>
<td>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices justo justo, ac consequat arcu pellentesque id. Nulla hendrerit dui vitae neque venenatis consequat. Morbi justo eros, dictum et enim et, pellentesque fermentum augue. Aliquam
non sapien eros. Sed auctor enim ac blandit rhoncus. Vivamus condimentum ex nulla, quis laoreet risus sodales quis. Vivamus interdum aliquam ultricies. Donec consectetur turpis et vehicula hendrerit. Fusce ac dui nec odio convallis malesuada
id ultricies lectus.
</p>
<p>
2. Nam mi enim, bibendum id porttitor quis, posuere ac arcu. Donec pulvinar enim nec gravida accumsan. Fusce enim risus, laoreet nec venenatis aliquam, feugiat a sapien. Aenean vulputate fermentum ex, at cursus diam cursus vel. Vivamus maximus velit mi,
ut auctor libero hendrerit ut. Donec vel pharetra nulla. Aenean imperdiet elementum felis vel finibus. Aenean eu luctus velit, nec accumsan velit.
</p>
<p>
3. Nullam pharetra orci nec lacinia bibendum. Ut tortor dolor, feugiat sed nulla ac, ultricies vehicula mi. Donec in arcu tincidunt, convallis lectus eu, ornare eros. Duis mollis ultrices lacus vulputate iaculis. Quisque urna lorem, consectetur in sollicitudin
ut, volutpat et ex. Integer finibus malesuada ipsum, eget consequat nulla interdum et. Maecenas ullamcorper ante turpis, vitae mattis libero ultricies a. Duis bibendum sapien vitae molestie interdum.
</p>
<p>
4. Vestibulum cursus ipsum augue, eget consequat dui ullamcorper sed. Phasellus a ligula eu tellus posuere tristique quis eu odio. Nullam id est in orci pharetra tempus sed dictum sem. Phasellus vehicula iaculis augue ac scelerisque. Sed pretium eros
sed tortor condimentum viverra. Quisque euismod sed ante eu facilisis. Quisque rhoncus auctor arcu at aliquet. Pellentesque eleifend leo at nisl fringilla sagittis. Sed augue erat, faucibus a nulla at, porttitor volutpat dui.
</p>
<p>
5. Maecenas semper erat euismod, ultricies augue et, aliquam ipsum. Sed commodo diam a posuere tristique. Vestibulum placerat risus orci, vitae finibus libero vulputate sed. Vestibulum ac nulla maximus, lobortis turpis interdum, tempor lectus. Fusce pretium
scelerisque viverra. Vestibulum aliquam at ex eget sollicitudin. Proin in vehicula velit. Nam eget metus sed dui lobortis pulvinar sit amet sed tortor. Aliquam eu nunc a tortor ultricies euismod.
</p>
</td>
</tr>
<tr>
<td>
<img class="imgfooter" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
</td>
</tr>
</table>
</div>
</div>
.imgbg { width: 100%; }
.innerdiv1 {
max-width: 975px;
width: 100%;
position: relative;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
left: 0;
top: 0
}
我对如何让这些 div 以我希望的方式堆叠感到困惑。我无法让主要内容div(.innerdiv2
)堆叠在第一个headerdiv(.innerdiv1
)下面那个has/involves绝对定位(以便一张图片在另一张图片之上)。
我还需要避免在图像上使用固定高度。这是我在搜索相关帖子和解决方案时发现最多的建议。但我不希望那个(固定高度)锁定在页面上第二个 div 开始的位置。如果屏幕尺寸缩小,那么我希望两个 header 图像按比例缩小,这意味着它们的高度会降低,第二个 div 应该开始更高,这就是我不想的原因使用固定高度。这可能吗?
这是我正在使用的代码:
.maindiv {
position: relative;
}
.innerdiv1 {
max-width: 975px;
width: 100%;
}
.imgbg {
position: absolute;
z-index: 102;
max-width: 975px;
width: 100%;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
}
.innerdiv2 {
position: relative;
width: 100%;
}
.tbl1 {
width: 100%;
max-width: 975px;
" border="0" cellpadding="0" cellspacing="0;
}
.imgfooter {
width: 100%;
max-width: 975px;
position: relative;
cursor: pointer;
}
<div class="maindiv">
<div class="innerdiv1">
<img class="imgbg" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
<img class="imglogo" src="data:image/jpeg;base64,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">
</div>
<div class="innerdiv2">
<table class="tbl1">
<tr>
<td>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices justo justo, ac consequat arcu pellentesque id. Nulla hendrerit dui vitae neque venenatis consequat. Morbi justo eros, dictum et enim et, pellentesque fermentum augue. Aliquam
non sapien eros. Sed auctor enim ac blandit rhoncus. Vivamus condimentum ex nulla, quis laoreet risus sodales quis. Vivamus interdum aliquam ultricies. Donec consectetur turpis et vehicula hendrerit. Fusce ac dui nec odio convallis malesuada
id ultricies lectus.
</p>
<p>
2. Nam mi enim, bibendum id porttitor quis, posuere ac arcu. Donec pulvinar enim nec gravida accumsan. Fusce enim risus, laoreet nec venenatis aliquam, feugiat a sapien. Aenean vulputate fermentum ex, at cursus diam cursus vel. Vivamus maximus velit mi,
ut auctor libero hendrerit ut. Donec vel pharetra nulla. Aenean imperdiet elementum felis vel finibus. Aenean eu luctus velit, nec accumsan velit.
</p>
<p>
3. Nullam pharetra orci nec lacinia bibendum. Ut tortor dolor, feugiat sed nulla ac, ultricies vehicula mi. Donec in arcu tincidunt, convallis lectus eu, ornare eros. Duis mollis ultrices lacus vulputate iaculis. Quisque urna lorem, consectetur in sollicitudin
ut, volutpat et ex. Integer finibus malesuada ipsum, eget consequat nulla interdum et. Maecenas ullamcorper ante turpis, vitae mattis libero ultricies a. Duis bibendum sapien vitae molestie interdum.
</p>
<p>
4. Vestibulum cursus ipsum augue, eget consequat dui ullamcorper sed. Phasellus a ligula eu tellus posuere tristique quis eu odio. Nullam id est in orci pharetra tempus sed dictum sem. Phasellus vehicula iaculis augue ac scelerisque. Sed pretium eros
sed tortor condimentum viverra. Quisque euismod sed ante eu facilisis. Quisque rhoncus auctor arcu at aliquet. Pellentesque eleifend leo at nisl fringilla sagittis. Sed augue erat, faucibus a nulla at, porttitor volutpat dui.
</p>
<p>
5. Maecenas semper erat euismod, ultricies augue et, aliquam ipsum. Sed commodo diam a posuere tristique. Vestibulum placerat risus orci, vitae finibus libero vulputate sed. Vestibulum ac nulla maximus, lobortis turpis interdum, tempor lectus. Fusce pretium
scelerisque viverra. Vestibulum aliquam at ex eget sollicitudin. Proin in vehicula velit. Nam eget metus sed dui lobortis pulvinar sit amet sed tortor. Aliquam eu nunc a tortor ultricies euismod.
</p>
</td>
</tr>
<tr>
<td>
<img class="imgfooter" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
</td>
</tr>
</table>
</div>
</div>
.imgbg { width: 100%; }
.innerdiv1 {
max-width: 975px;
width: 100%;
position: relative;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
left: 0;
top: 0
}