使用 CSS 在容器内移动元素

moving elements inside a container using css

本文关键字：移动 元素 CSS 使用      更新时间：2023-09-26

我正在处理的项目有问题，我按住容器内的按钮，每当我尝试在 css 中移动它们时，按钮就会消失，设置容器的顶部或右侧相对值 css 将移动整个网站，我试图实现的是将所有按钮排列在右侧， 我提供了一小部分代码示例，这是我当前的工作，以及指向该站点的链接，以便您可以看到结果。

我相信问题可能出在画布的大小上，但是增加画布的大小会拉伸所有图像以适应它，但我仍然无法使用 css 移动它们。感谢您提供的任何帮助。

.HTML：

<div id="container">
        <div id="webgl"></div>
        <input type="image" id="intro" src="images/icon-intro.png"/>
        <input type="image" id="avatar" src="images/icon-avatar.png"/>
        <input type="image" id="news" src="images/icon-news.png"/>
        <input type="image" id="play" src="images/icon-play.png"/>
        <input type="image" id="stop" src="images/icon-stop.png"/>
    </div>

.CSS：

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#intro,
#intro {
  width: 10%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#intro {
  z-index: 10;
}

指向出现问题的网站的链接：

http://playground.eca.ed.ac.uk/~s1572393/

再次感谢您的任何帮助或解释。

在遵循问题评论中的追索权后，我能够解决问题。

我删除了容器并将输入元素的 css 重构为以下内容：

#intro {
  position: absolute;
  right: 30px;
  top: 30px; 
  z-index: 10; 
}
相关文章：