Html 两个绝对框相互下方。。？_Html_Css_Responsive Design

Html 两个绝对框相互下方。。？

html css responsive-design

Html 两个绝对框相互下方。。？,html,css,responsive-design,Html,Css,Responsive Design,我的英语很差。。我有两个盒子，一个在左下角，另一个在右下角，都有位置：绝对和底部：0px；。当我将窗口缩小时，它们重叠。。。但它们应该在彼此下面（还没有代码）。尝试最大宽度，但我猜“点：绝对”会破坏它 <body> <div id="nav"> <p><a href="">MUSIC</a>    <a href="">RADIO &

我的英语很差。。我有两个盒子，一个在左下角，另一个在右下角，都有位置：绝对和底部：0px；。当我将窗口缩小时，它们重叠。。。但它们应该在彼此下面（还没有代码）。尝试最大宽度，但我猜“点：绝对”会破坏它

    <body>
    <div id="nav">
        <p><a href="">MUSIC</a> &nbsp;&nbsp;
        <a href="">RADIO & LIVE CHAT</a> &nbsp;&nbsp;
        <a href="">SHOP</a> &nbsp;&nbsp;
        <a href="">COMMUNITY</a> &nbsp;&nbsp;
        <a href="">SUBMIT</a> &nbsp;&nbsp;
        <a href="">CONTACT</a></p>
    </div>
    <div id="iconrow">
        <a href="">
            <img src="../bilder/youtube.png" class="iconrow"/>
        </a>
        <a href="">
            <img src="../bilder/soundcloud.png" class="iconrow"/>
        </a>
        <a href="">
            <img src="../bilder/spotify.png" class="iconrow"/>
        </a>
    </div>
</body>
#nav {
font-family:Typograph;
position: absolute;
bottom: 0px;
right: 0px;
padding: 0px 40px 10px 0px;
font-size: 18px;}
#iconrow {
position:absolute;
bottom: 0px;}
.iconrow {
width:50px;
float:left;
padding: 0px 0px 25px 20px;}




#导航{
字体系列：排版；
位置：绝对位置；
底部：0px；
右：0px；
填充：0px 40px 10px 0px；
字体大小：18px；}
#伊康罗{
位置：绝对位置；
底部：0px；}
I.iconrow{
宽度：50px；
浮动：左；
填充：0px 0px 25px 20px；}

绝对位置将完全阻止您实现这一目标。

您需要的是两个宽度为50%的框，浮动（例如向左），然后是一个媒体查询，在特定屏幕大小下将框的宽度调整为100%。

使用媒体查询，定义

#图标行

的高度，并将该高度值作为

底部

值分配给

#nav

。再加上一些其他细节——请参阅我的代码片段

#导航{
字体系列：排版；
位置：绝对位置；
底部：0px；
右：0px；
填充：0px 40px 10px 0px；
字号：18px；
}
#伊康罗{
位置：绝对位置；
底部：0px；
高度：70像素；
}
I.iconrow{
宽度：50px；
浮动：左；
填充：0px 0px 25px 20px；
}
@媒体屏幕和屏幕（最大宽度：700px）{
#导航，
#伊康罗{
宽度：100%；
文本对齐：居中；
}
#导航{
底部：70像素；
左：0px；
填充：0px 10px 0px 10px；
}
I.iconrow{
浮动：无；
}

您能显示您的代码吗？

绝对元素在文档流中不知道彼此的存在。这就是它们的观点。您可能希望使用媒体查询来检测视图是否太小而无法同时显示这两个元素。或者只需在媒体查询中设置位置：相对