Question

我有两个问题......

无论窗口大小如何，如何使#LeftTable和下拉菜单保持在页面上的位置？

现在，它将移动到相对于窗口的大小。我宁愿它留在背景图片上的完全相同的位置（即使它意味着在浏览器的底部有滚动条）。我该怎么做？

如何让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

CSS固定元素定位和链接

1 个答案: