Question

我在视频上方有一个静音按钮，但是我不知道如何确保该按钮始终位于视频的右下角。

我尝试将位置设为绝对，但这并没有太大帮助。

HTML

<div id="videopart">

<video id="myVideo" width="320" height="176" controls muted autoplay="autoplay">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<button onclick="toggleMute();" type="button" id="mute">Toggle sound</button>
</div>

CSS

body {
  margin: 0px;
  padding: 0px;
}

#mute {
    position: absolute;
    margin-left: auto;
    margin-right: 20px;
}

#videopart {
  height: 100vh;
  position: relative;
  margin: 0 !important;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#myVideo {
    margin: auto;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    width: 100%;
    height: auto;
}

无论视频大小如何，我都希望按钮位于同一位置（相对于视频）。你能帮我吗？

Answer 1

要定位按钮，您将必须在X和Y轴上设置位置。另外，不要忘记将#mute的z索引设置为高于#myVideo的z索引。在下面的示例中，#mute的位置相对于#videopart

#mute {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 10;
}

Answer 2

class CoursesToPrintPdf < Prawn::Document

    def initialize(courses, participations)
        @courses = courses
        @participations = participations
        header
    end

    def header
        @courses.order('day ASC').each do |course|

            text_box("#{course.course_day_pdf}",
            :align => :right)
            text "#{course.round.round_name_simple}"

            table deltakere_rows do
                self.header = true
            end
        end
    end

    def deltakere_rows
        [["ID", "Name"]] +
        @participations.map do |p|
            [p.participant.id, p.participant.full_name]
        end
    end

end

使用它来定位#mute { position: absolute; right:20px; top:0; /* OR 20px */ z-index:100; }处元素，其中absolute为20px，right为0px或20px

Answer 3

将位置中的 position：absolute 更改为 position：relative ，并使用 bottom：0 和 right：0更改位置#mute

Answer 4

尝试一下

<div id="videopart">
<table>
<tr>
<td>
  <video id="myVideo" width="320" height="176" controls muted autoplay="autoplay">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
</td>  
</tr>
<tr>
  <td align="right">
    <button onclick="toggleMute();" type="button" id="mute">Toggle sound</button>
  </td>
</tr>
</table>

</div>

我还没有使用过CSS，但是如果您想要其他样式，可以使用

如何使我按钮的相对位置（相对于视频）相同？

4 个答案: