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