爲什麼我的按鈕位置會影響列表的位置？

我正在製作一個使用html和css的網頁，並且我在頁面底部定位了一個水平列表，但是當我在頁面中心添加一個按鈕時，它會將列表向下推到頁面的下方。爲什麼我的按鈕位置會影響列表的位置？

.navigation { 
 
    max-width: 700px; 
 
    margin: 0 auto; 
 
    margin-top: 700px; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.navigation ul li { 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 
.navigation ul li a { 
 
    padding: 5px 5px; 
 
    width: 100%; 
 
    font-family: "calibri"; 
 
} 
 
.button { 
 
    -moz-box-shadow: inset 0px 0px 0px 0px #fce2c1; 
 
    -webkit-box-shadow: inset 0px 0px 0px 0px #fce2c1; 
 
    box-shadow: inset 0px 0px 0px 0px #fce2c1; 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF9933), color- stop(1, #fb9e25)); 
 
    background: -moz-linear-gradient(center top, #FF9933 5%, #fb9e25 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient (startColorstr='#FF9933', endColorstr='#fb9e25'); 
 
    background-color: #FF9933; 
 
    -webkit-border-top-left-radius: 0px; 
 
    -moz-border-radius-topleft: 0px; 
 
    border-top-left-radius: 0px; 
 
    -webkit-border-top-right-radius: 0px; 
 
    -moz-border-radius-topright: 0px; 
 
    border-top-right-radius: 0px; 
 
    -webkit-border-bottom-right-radius: 0px; 
 
    -moz-border-radius-bottomright: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    -webkit-border-bottom-left-radius: 0px; 
 
    -moz-border-radius-bottomleft: 0px; 
 
    border-bottom-left-radius: 0px; 
 
    text-indent: 0px; 
 
    display: inline-block; 
 
    color: #00000; 
 
    font-family: Arial; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    height: 90px; 
 
    line-height: 100px; 
 
    width: 500px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 0px #cc9f52; 
 
    margin-left: 550px; 
 
    margin-top: 300px; 
 
}

<!DOCTYPE html> 
 
<title>website</title> 
 
<body> 
 

 
    <a href="#" class="button">UPLOAD</a> 
 

 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a href="">Sign Up</a> 
 
     </li> 
 
     <li><a href="">Login</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
     <li><a href="">About Us</a> 
 
     </li> 
 
     <li><a href="">RFR</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

來源

2014-12-19 zigg76

你的類導航具有的margin-top：700像素，這意味着，它想把自身定位700像素您要添加的按鈕下方。因此，當頁面爲空時，導航會將自己定位在屏幕頂部以下700px（因爲屏幕上沒有其他元素），但是當按鈕被引入時，導航位於其下方700px處。

我猜你正在尋找一個'粘腳'（其中導航將出現在空白屏幕的底部，但會要求你向下滾動，如果你有一個頁面充滿內容）或可能是一個頁腳位置固定（始終位於屏幕底部）。

要實現一個固定的頁腳，你可以改變你的導航類，如下所示：

.navigation { 
    max-width: 700px; 
    margin: 0 auto; 
    bottom: 0; 
    position:absolute; 
}

bottom:0;意味着你要你的資產淨值從屏幕底部0像素。 position:fixed告訴元素使用瀏覽器窗口定位自己，而不是其他元素（如按鈕）。

檢查出來這個jsfiddle

來源

2014-12-19 03:18:47

謝謝，但我會如何解決在該位置屏幕的底部，然後不使用margin-top：700px？ – zigg76 2014-12-19 03:23:33

我用一個例子更新了答案。關鍵在於，如果您使用margin-top，則它將自身相對於其上方的元素進行定位。 – 2014-12-19 03:31:05

改變導航的margin-top的價值200像素或更低。

.navigation { 
max-width: 700px; 
margin: 0 auto; 
margin-top: 200px;

來源

2014-12-19 03:23:25 dabxiiz30

@ zigg76如果你瞄準了一個棘手的頁腳，你可以使用下面的CSS和編輯它有點讓您滿意

.myfooter 
    { 
    position:fixed; 
    bottom:0; 
    }

來源

2014-12-19 03:28:41 Ziddorino

爲什麼我的按鈕位置會影響列表的位置？

回答

相關問題