Question 222303 in Html Question posted in
Some basic documentation can be found here.

Html – Can not get div to show ontop of video

I would like the div with the buttons to display on top of the video. I have tried z-index and positions but it does not seem to do it.

<!-- jQuery 3.3.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700|Material+Icons" />

<div>
  <div class="background" width="80%" height="80%" style="background-color:White; center background-size: auto; height:100%; margin:auto; padding-top:20%; background-repeat: no-repeat;position:relative;">
    <video width="100%" height="80%" controls autoplay>
  <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/mp4">
  <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>
  </div>
  <div style="width:550px; height:auto; margin-left:auto; margin-right: auto; padding:10 10 10 10; background-color:#47b216; border-radius:25px;z-index:999;position:absolute">
    <h2 style="text-align:center;">Welcome to Pure Ohio Wellness</h2>
    <h3 style="text-align:center;">Are you above the age 18?</h3>
    <div style="text-align:center;"><a href="rd/index.php"><button class="patientbutton" type="button">Yes</button></a>
      <a href="http://www.google.com"><button class="patientbutton2" type="button">No</button></a>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    On the div that you want to move, you will need to add top/left/bottom/right etc.. These will allow you to actually move it around.

    For my example, I used top/left to give you a general idea.

    You really should use CSS classes and not inline CSS. But I didn’t go and fix that part.

    <!-- jQuery 3.3.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700|Material+Icons" />

<div>
  <div class="background" width="80%" height="80%" style="background-color:White; center background-size: auto; height:100%; margin:auto; padding-top:20%; background-repeat: no-repeat;position:relative;">
    <video width="100%" height="80%" controls autoplay>
  <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/mp4">
  <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>
  </div>
  <div style="width:550px; height:auto; margin-left:auto; margin-right: auto; padding:10 10 10 10; background-color:#47b216; border-radius:25px;z-index:999;position:absolute;top:200px;left:120px">
    <h2 style="text-align:center;">Welcome to Pure Ohio Wellness</h2>
    <h3 style="text-align:center;">Are you above the age 18?</h3>
    <div style="text-align:center;"><a href="rd/index.php"><button class="patientbutton" type="button">Yes</button></a>
      <a href="http://www.google.com"><button class="patientbutton2" type="button">No</button></a>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    1.) It’s the common parent element that should have position:relative; to function as the position reference for the "button" (not the video container div, which is a sibling to the button div)

    2.) Add left:50%;top:50%; transform:translate(-50%,-50%); to the "button" div in order to center it within the relatively positioned parent. auto margins won’t do anything on an absolutely positioned element.

    <!-- jQuery 3.3.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700|Material+Icons" />

<div style="position:relative;">
  <div class="background" width="80%" height="80%" style="background-color:White; center background-size: auto; height:100%; margin:auto; padding-top:20%; background-repeat: no-repeat;">
    <video width="100%" height="80%" controls autoplay>
  <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/mp4">
  <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>
  </div>
  <div style="width:550px; height:auto; padding:10 10 10 10; background-color:#47b216; border-radius:25px;z-index:999;position:absolute; left:50%;top:50%; transform:translate(-50%,-50%);">
    <h2 style="text-align:center;">Welcome to Pure Ohio Wellness</h2>
    <h3 style="text-align:center;">Are you above the age 18?</h3>
    <div style="text-align:center;"><a href="rd/index.php"><button class="patientbutton" type="button">Yes</button></a>
      <a href="http://www.google.com"><button class="patientbutton2" type="button">No</button></a>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search