如何解决定位div容器
.containerBigOverview{
display: block;
position: absolute;
margin: 3%;
padding-bottom: 0;
background-color:red;
}
.containerOverview {
position: relative;
width: 31%;
margin: 1%;
float: left;
}
@media screen and (max-width: 600px) {
.containerOverview {
position: relative;
width: 100%;
width: 100%;
margin: 3%;
float: none;
}
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(176,224,230,0.9);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.containerOverview:hover .overlay {
height: 50%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}
/* FOOTER */
.footer {
position:absolute;
width:100%;
background-color: #aaa;
color: white;
padding: 2%;
}
.footer a{
text-decoration: none;
color:white;
padding: 1%;
}
<p>Hover over the image to see the effect.</p>
<div class="containerBigOverview">
<div class="containerOverview">
<img src="https://gradle.org/images/gradle-400x400.png" alt="Forbildung1" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="containerOverview">
<img src="https://gradle.org/images/gradle-400x400.png" alt="Forbildung2" class="image">
<div class="overlay">
<div class="text">Hello World 2</div>
</div>
</div>
<div class="containerOverview">
<img src="https://gradle.org/images/gradle-400x400.png" alt="Forbildung3" class="image">
<div class="overlay">
<div class="text">Hello World 3</div>
</div>
</div>
</div>
<div class="footer">
<a href="impressum.html"> Impressum </a>
<a href="datenschutz.html"> Datenschutz </a>
</div>
我正在尝试建立一个网站。 一个问题出现了: 我有一个用于页脚的div,一个div是包含图像的几个div的容器。 现在,页脚显示在我的图像容器上,我不知道为什么。 如果我删除位置:亲戚,则我的页脚包含图像容器。
解决方法
我找到的最简单的解决方案是使用display: flex
将所有容器转换为Flexbox。 Flexbox比块显示更清晰-试试看。
另外,HTML <footer>
中的页脚有一个特殊标记,因此您无需创建新类。
这是固定代码:https://codepen.io/wiszuc/pen/RwaRLQK
如果您从页脚中删除了position: relative
,则该位置默认为position: static
,在这种情况下,这就是您可能会看到的叠加效果。
根据您要实现的目标,可以使用不同的positioning。
通常在页脚中可以使用:
.footer {
position: fixed;
bottom: 0;
}
以将其附加到页面底部。
完整的示例:
body {
min-height: 20rem;
}
.containerBigOverview{
display: flex;
postion: relative;
justify-content: center;
margin: 3%;
padding-bottom: 0;
background-color:red;
}
.containerOverview {
position: relative;
display: flex;
justify-content: space-evenly;
width: 31%;
margin: 1%;
}
@media screen and (max-width: 600px) {
.containerOverview {
position: relative;
width: 100%;
width: 100%;
margin: 3%;
float: none;
}
}
.svg {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(176,224,230,0.9);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.containerOverview:hover .overlay {
height: 50%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}
/* FOOTER */
.footer {
position: fixed;
bottom: 0;
width:100%;
background-color: #aaa;
color: white;
padding: 2%;
}
.footer a{
text-decoration: none;
color:white;
padding: 1%;
}
<div class="containerBigOverview">
<div class="containerOverview">
<svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="containerOverview">
<svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
<div class="overlay">
<div class="text">Hello World 2</div>
</div>
</div>
<div class="containerOverview">
<svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
<div class="overlay">
<div class="text">Hello World 3</div>
</div>
</div>
</div>
<div class="footer">
<a href="impressum.html"> Impressum </a>
<a href="datenschutz.html"> Datenschutz </a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。