如何使用 css 将按钮定位到右下角

当我尝试将按钮定位到左下角时，它起作用了，但是当我转到其中一个按钮并返回时，它的所有按钮都在那里，只有一个？另一个我需要向下滚动以查看请帮助

.HTML

<!Doctype html>
<html>
  <head>
  <title>Forsaken </title>
  <link href="main.css" rel="stlesheet" type="text/css">
  </head>
   <body>

  <a href="teams.html"><button><img class="#topleft" src="icon1.jpg  " width="100%" alt="Teams" ></button></a>
  <a href="store.html"><button><img class="#topright" src="icon2.jpg  " width="100%" alt="store" ></button></a>
  <a href="sponsors.html"><button><img class="#bottomleft" src="icon4.jpg  " width="100%" alt="sponsors" ></button></a>
  <a href="aboutus.html"><button><img class="#bottomright" src="icon3.jpg  " width="100%" alt="aboutus" ></button></a>

</body>

</html>

.CSS

#topleft {
    position: fixed;
    top: 0px; 
    left: 0px;
}
#topright {
    position: fixed;
    top: 0px;
    right: 0px;
}
#left {
    position: fixed;
    left: 0px;
}
#right {
    position: fixed;
    right: 0px;
}

div {
    border-style:solid;
    border-width:0px;   
    border-color:#000000;
}
#yes {
  border: none;
    padding: 0;
    background: none;
}
.flat {
    border: none;
    background: #222;
    color: #FFF;
    padding: 0px 0px;
    font-size: 22px;
    font-family: Palatino;
    font-weight: bold;
}
.lighter {
    background: #666;
}
#no {
  border: none;
    padding: 0;
    background: none;
}
.flat {
    border: none;
    background: #222;
    color: #FFF;
    padding: 0px 0px;
    font-size: 22px;
    font-family: Palatino;
    font-weight: bold;
}
.lighter {
    background: #666;
}

p.s 所有其他按钮都在工作，但"关于我们"按钮除外。

试试这个：

.topLeft{
  position: absolute;
  top:0;
  left:0;
}
.topRight{
  position: absolute;
  top:0;
  right: 0;
}
.bottomLeft{
  position: absolute;
  bottom: 0;
  left: 0;
}
.bottomRight{
  position: absolute;
  bottom: 0;
  right:0;
}

<button class="topLeft"><a href="#">Click Me</a></button>
<button class="topRight"><a href="#">Click Me</a></button>
<button class="bottomLeft"><a href="#">Click Me</a></button>
<button class="bottomRight"><a href="#">Click Me</a></button>

工作代码笔

注意

不要在类声明中使用主题标签，这是不好的做法（用于捕获 id 的主题标签）。

这就是您的代码不起作用的原因。

如果有任何问题，请回复..

试试这个：

注意

相关内容

最新更新

热门标签：