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個絕對盒子彼此之下..？

回答

相關問題