CSS фиксированный элемент позиционирования и Link

Question

У меня есть два вопроса ...

1. Как сделать #LeftTable и в раскрывающемся меню, чтобы сохранить свое положение на странице, независимо от размера окна?

Как сейчас, он будет перемещаться относительно размера окна. Я предпочел бы, чтобы он оставался на одном и том же месте на фоновом изображении (даже если это означает наличие прокручиваемых баров в нижней части браузера). Как мне это сделать?

2. Как получить ссылку 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 и применить фон к тому, что если вы хотите, чтобы изображение т двигаться с левой таблице:

<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