CSS固定元件定位和鏈接

Question

我有兩個問題...

1. 如何讓#LeftTable和下拉菜單，以保持自己的位置在頁面上，而不管窗口的大小？

現在，它會移動到相對於窗口的大小。我寧願將它保留在背景圖片上的相同位置（即使它意味着在瀏覽器底部有滾動條）。我該怎麼做呢？

1. 如何讓HTML鏈接在按鈕內工作？

body { 
 
    background-color: gray; 
 
    background-image: url('images/backgroundpic.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #87cefa; 
 
} 
 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
ul li { 
 
    position: relative; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: 0; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
input#gobutton { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) cursor: pointer; 
 
    padding: 5px 25px; 
 
    background: #87CEFA; 
 
    border: 1px solid #1E90FF; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    color: #f3f3f3; 
 
    font-size: 1.1em; 
 
} 
 
input#gobutton:hover, 
 
input#gobutton:focus { 
 
    background-color: #000080; 
 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
} 
 
#LeftTable { 
 
    position: absolute; 
 
    width: 25%; 
 
    min-width: 25%; 
 
    right: 75%; 
 
    left: 25%; 
 
    top: 25%; 
 
    bottom: 50%; 
 
    Right: 100px; 
 
    border: 1px; 
 
    color: black; 
 
    font-weight: bold; 
 
    background-color: white; 
 
    opacity: 0.5; 
 
    filter: alpha(opacity=50); 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<table id = "LeftTable"> 
 
<tr> 
 
<td width = "20%"></td> 
 
<td width = "80%" id='test'> 
 
<table> 
 
<tr><td>Left</td></tr> 
 
<tr><td>Left</td></tr> 
 
</table> 
 
</td> 
 
</tr> 
 
</table> 
 
<table class="gobutton" align="center"> 
 
    <tr> 
 
    <td> 
 
     <div class="b_left"></div> 
 
     <div class="b_middle"> 
 
     <input id="gobutton" type="submit" value="LISTEN" /> 
 
     <a href="http://www.google.com"> 
 
     </a> 
 
     </div> 
 
     <div class="b_right"></div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

對於你的鏈接：然而

你鏈接的作品在你的榜樣它試圖所以其未能通過的框架中打開。如果您在您的計算機上創建html文件，或者在網站上託管html，它應該可以正常工作。我測試了我的電腦上，該鏈接的工作是這樣的：

<a href="http://www.google.com"> 
    <input id="gobutton" type="submit" value="LISTEN" /> 
</a> 

對於你的表

如果你想要的位置永遠不會改變，你不應該使用百分比，你應該使用測量像像素。

所以不是

#LeftTable { 
    position: absolute; 
    width: 25%; 
    min-width: 25%; 
    right: 75%; 
    left: 25%; 
    top: 25%; 
... 

你會碰到這樣的：

#LeftTable { 
    position: absolute; 
    width: 25%; 
    min-width: 25%; 
    right: 50px; //in pixels 
    left: 50px; //in pixels 
    top: 50px; //in pixels 
... 

也可能需要換你的表在一個div，如果你想在圖像T應用背景到跟左表一起移動：

<div class="main"> 
//tables 
</div> 

.main{ 
    background-image: url('imageurl'); 
    width:100%; 
    height:100%; 
    position: absolute; 
    bottom: 0; 
    margin: 0; 
} 

這裏是一個例子：http://codepen.io/nilestanner/pen/EgNXwE