div 低于另一个绝对定位的 div [英] div below another absolute positioned div

问题描述

我在另一个具有位置:绝对"的 div 下的 div 有问题.我需要让 footer 出现在 container div 下，但现在页脚出现在容器后面的某个地方.屏幕:(绿色背景的div是页脚)

HTML:

<div class="logo">Zhlednuto.cz
<div class="菜单">首页，关于atd.

<!-- 迷你波扎迪--><div class="minipozadi">阿霍伊

<!-- hlavni obsah --><div class="容器">Lorem ipsum dolor 坐 amet.40

CSS:

@font-face{字体系列:Lato-Bold；src: url(fonts/Lato-Bold.ttf);}身体{字体系列:Myriad Pro；字体大小:17px；颜色:#a1a8af；背景颜色:#34495e；}.horni-面板{边框顶部:8px 实心 #34495e；位置:绝对；顶部:0;左:0;右:0;高度:77px；宽度:100%；背景色:#ffffff；}.标识{颜色:#34495e；字体系列:Lato-Bold；字体大小:33px；}.minipozadi{高度:282px；宽度:100%；背景图片:网址(img/bg.jpg)；背景尺寸:封面；背景重复:不重复；边距:0 自动；位置:绝对；顶部:85px；左:0;右:0;z-索引:1；文字对齐:居中；字体大小:30px；}.容器{填充:20px；边距:0 自动；边框半径:5px；z-索引:100；位置:绝对；顶部:0;右:0;左:0;边距顶部:266px;宽度:70%；背景色:#ffffff；border-rder-radius: 5px;}.页脚{边距:0 自动；宽度:100%；高度:480px；背景颜色:绿色；}

解决方案

绝对定位的元素将从文档流中移除.所以页脚向上移动，因为容器不是该流的一部分.您需要对两者使用相对定位，或对两者使用绝对定位并设置其特定的顶部和左侧值.

或者，您可以在页脚上设置一个上边距，使其下降到足以使其位于容器下方.

您还需要查看您的 css.有几个可能存在冲突的冗余属性.

正文{字体系列:arial；字体大小:17px；颜色:#a1a8af；背景颜色:#34495e；}.horni-面板{边框顶部:8px 实心 #34495e；位置:绝对；顶部:0;左:0;高度:77px；宽度:100%；背景色:#ffffff；}.标识{颜色:#34495e；字体系列:Lato-Bold；字体大小:33px；}.minipozadi{高度:100px；宽度:100%；位置:绝对；背景颜色:蓝色；顶部:85px；左:0;z-索引:1；文字对齐:居中；字体大小:30px；}.容器{填充:20px；边框半径:5px；z-索引:100；位置:相对；边距:0 自动；顶部:120px；宽度:70%；背景颜色:#fea;}.页脚{边距顶部:120px；宽度:100%；高度:80px；背景颜色:绿色；}

在这个 fiddle 中，我删除了一些多余的 css 并在容器上使用了 position:relativediv 而不是绝对的.页脚上的 margin-top 属性需要大于或等于容器上的 top 属性，才能使其保持在其下方.

I have problem with a div below another div which has "position: absolute". I need to make footer appear UNDER container div but now footer is appearing somewhere behind container. Screen: (div with green background is footer)

HTML:

<div class="horni-panel">
    <div class="logo">
        Zhlednuto.cz
    </div>

    <div class="menu">
        Home, about atd.
    </div>

</div>

<!-- Mini pozadi -->
<div class="minipozadi">
    ahoj
</div>

<!-- hlavni obsah -->
<div class="container">


Lorem ipsum dolor sit amet. x 40
</div>

CSS:

@font-face
{
    font-family: Lato-Bold;
    src: url(fonts/Lato-Bold.ttf);
}

body
{
    font-family: Myriad Pro;
    font-size: 17px;
    color: #a1a8af;
    background-color: #34495e;
}

.horni-panel
{
    border-top: 8px solid #34495e;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height: 77px;
    width: 100%;
    background-color: #ffffff;
}

.logo
{
    color: #34495e;
    font-family: Lato-Bold;
    font-size: 33px;
}


.minipozadi
{
    height: 282px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    position:absolute;
    top: 85px;
    left:0;
    right:0;
    z-index:1;
    text-align:center;
    font-size:30px;
}

.container
{
    padding: 20px;
    margin: 0 auto;
    border-radius: 5px;
    z-index: 100;
    position:absolute;
    top:0;
    right:0;
    left:0;
    margin-top:266px;
    width: 70%;
    background-color: #ffffff;
    border-rder-radius: 5px;
}

.footer
{
margin: 0 auto;
    width: 100%;
    height: 480px;
    background-color: green;
}

解决方案

Absolutely positioned elements will be removed from the flow of the document. So the footer moves up because container is not part of that flow. You would need to either use relative positioning on both, or absolute positioning for both and set their specific top and left values.

Alternatively you could set a top margin on footer that makes it drop enough so it is positioned below the container.

You also need to look at your css. There are several redundant properties that are possibly conflicting.

body
{
    font-family: arial;
    font-size: 17px;
    color: #a1a8af;
    background-color: #34495e;
}

.horni-panel
{
    border-top: 8px solid #34495e;
    position:absolute;
    top:0; left:0;
    height: 77px;  width: 100%;
    background-color: #ffffff;
}

.logo
{
    color: #34495e;
    font-family: Lato-Bold;
    font-size: 33px;
}

.minipozadi
{
    height: 100px;  width: 100%;
    position:absolute;
    background-color: blue;
    top: 85px;   left:0;
    z-index:1;
    text-align:center;
    font-size:30px;
}

.container
{
    padding: 20px;
    border-radius: 5px;
    z-index: 100;
    position:relative;
    margin: 0 auto;
    top: 120px;
    width: 70%;
    background-color: #fea;
}

.footer
{
    margin-top: 120px;
    width: 100%;
    height: 80px;
    background-color: green;
}

Here in this fiddle I removed some of the redundant css and used position:relative on the container div instead of absolute. The margin-top property on the footer needs to be greater than or equal to the top property on the container in order for it to stay below it.

这篇关于div 低于另一个绝对定位的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！