除图像外的按钮位置

Question

我有一个图像和5个按钮，我想定位在的右上角边的图像，按钮应该是一个高于另一个。当前，按钮位于图像的右下角，并放置在一行中。

​

function pictureChange(imgId, path) {
  document.getElementById(imgId).src = path;
}

p {
  display: inline-block;
}

<img id="scene1" src="images/scene1/scene1-4dof.png">

<p>
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
</p>
<p>
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
</p>
<p>
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
</p>
<p>
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
</p>
<p>
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</p>

​

Answer 1

​

function pictureChange(imgId,path) {
  document.getElementById(imgId).src=path;
}

.sid {
  display: inline-block;
  vertical-align: top;
}

img {
  width:200px;
  height:200px;
}

.sid input {
  display: block;
}

<img class="sid" id="scene1" src="http://via.placeholder.com/200x200">
<!---->
<div class="sid">
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>

​

我所做的是将display: inline-block;添加到图像中，并添加div“以包含输入”。

<!---->表示inline行为在inline-block中“显示元素之间的任何间距”

也是右上半部分的vertical-align: top;。

Answer 2

这个解决方案将根据周围的元素进行缩放。为了显示这一点，我添加了一个额外的包装器。

​

.wrapper {
  position: relative; 
  /* width of the image here */
}
.wrapper .buttons {
  position: absolute;
  right: 3%;
  top: 3%;
}
#scene1 {
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <img id="scene1" src="http://via.placeholder.com/350x150">
  <div class="buttons">
    <p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
    <p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
    <p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
    <p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
    <p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
  </div>
</div>

​

Answer 3

纯Css :

1)图像上的按钮：

​

div {
    position: relative;
    display: inline-block;
}

img {
    width:300px;
    border:1px solid #000;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
}

<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>

​

2)图片后的按钮：

​

div {
    position: relative;
    display: inline-block;
}

img {
    width:200px;
    border:1px solid #000;
}

.right {
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    vertical-align: top;

}

<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>

​