2个绝对盒子彼此之下..？

Sry my english is bad ..我得到了2个盒子，一个在左下角，另一个在右下角，都是位置：绝对和底部：0px ;.当我缩小窗口时，它们会重叠，但它们应该低于对方（尚未得到任何代码）。用最大宽度尝试，但我猜“这个位置：绝对的”破坏它。2个绝对盒子彼此之下..？

<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;}

来源

2017-07-14 Platschie x3

你能告诉你的代码？ – Frosty619

当涉及到文档流时，“绝对”元素不知道彼此的存在。这就是他们的观点。您可能希望使用媒体查询来检测视图太小而不适合两者。 –

绝对位置将完全阻止您实现该目标。您需要的是两个宽度为50％的框，浮动（例如左侧），然后是在特定屏幕大小下将框宽度调整为100％的媒体查询。

来源

2017-07-14 15:40:51

或者只是在媒体查询中设置'position：relative' – Morpheus

使用媒体查询，定义#icon-row的高度，并将该高度值作为bottom值指定为#nav。再加上其他一些细节 - 请参阅我的摘录。

#nav { 
 
    font-family: Typograph; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    padding: 0px 40px 10px 0px; 
 
    font-size: 18px; 
 
} 
 

 
#iconrow { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    height: 70px; 
 
} 
 

 
.iconrow { 
 
    width: 50px; 
 
    float: left; 
 
    padding: 0px 0px 25px 20px; 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    #nav, 
 
    #iconrow { 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
    #nav { 
 
    bottom: 70px; 
 
    left: 0px; 
 
    padding: 0px 10px 0px 10px; 
 
    } 
 
    .iconrow { 
 
    float: none; 
 
    }

<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>

来源

2017-07-14 16:10:39 Johannes

2个绝对盒子彼此之下..？

回答

相关问题