How to overlay div over another div

Question

I need assistance with overlaying my button divs over another my Trapezoids

I am using an array to store the colours then using the map function to map each button to the corresponding colour type.

When a user hovers over the colour buttons must appear to increase or decrease the counter by 1, to a minimum of 0.

The count of each colour must always be displayed. (input field)

My current code has all the buttons implemented at the bottom of the page, but as mentioned above I need each button and counter to be over their corresponding colours, The buttons must only display when the user hovers over the colour, The counter must always be visible.

Please see the below image for what I am trying to achieve: Please see linked image Image Should I use z-index: [number] for the layering?

Here is my current code:

 window.onload = function() { let colours = ["green", "brown", "blue", "yellow", "gold", "red"].map(id => { let colour = { elementCount: document.getElementById(id), elementPlus: document.getElementById(`${id}_plus`), elementMinus: document.getElementById(`${id}_minus`), counter: 0, }; colour.elementPlus.addEventListener("click", function() { colour.counter++; colour.elementCount.value = colour.counter; }); colour.elementMinus.addEventListener("click", function() { if (colour.counter > 0) { colour.counter--; colour.elementCount.value = colour.counter; } }); return colour; }); };

 .pyramid { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 100vmin; aspect-ratio: 9 / 15; background-color: white; display: grid; grid-template-columns: 1fr; }.pyramid > * { background: white; }.one { background-color: rgba(234, 27, 7, 0.97); }.two { background-color: rgba(244, 182, 0, 0.98); margin-top: 10px; }.three { background-color: rgba(249, 224, 41, 0.98); margin-top: 10px; }.four { background-color: rgba(4, 157, 252, 0.98); }.five { background-color: rgba(167, 118, 67, 0.99); gap: 0%;important. }:six { background-color, rgba(92, 213, 51. 0;98). },counter input[type=button]: input[type=text] { display; inline-block: width; 20px: background-color; transparent: outline; none: border; none: text-align; center: cursor; pointer: padding; 0px: color; black: height; 33px: font-family; 'Open Sans': } #container { width; 100px: height; 100px: position; relative, } #navi: #infoi { width; 100%: height; 100%: position; absolute: top; 0: left; 0: } #infoi { z-index; 10: } button { border-radius; 50%; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Colour counter</title> <link rel="stylesheet" href="css/style.css"> <script src="js/Main.js"></script> </head> <body> <div id="container"> <h1>Colour counter</h1> <div class="pyramid"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> </div> <h1>Counter Test</h1> <div id="input_div"> <input type="button" value="-" id="green_minus"> <input type="text" size="25" value="0" id="green"> <input type="button" value="+" id="green_plus"> </div> <div id="input_div2"> <input type="button" value="-" id="brown_minus"> <input type="text" size="25" value="0" id="brown"> <input type="button" value="+" id="brown_plus"> </div> <div id="input_div3"> <input type="button" value="-" id="blue_minus"> <input type="text" size="25" value="0" id="blue"> <input type="button" value="+" id="blue_plus"> </div> <div id="input_div4"> <input type="button" value="-" id="yellow_minus"> <input type="text" size="25" value="0" id="yellow"> <input type="button" value="+" id="yellow_plus"> </div> <div id="input_div5"> <input type="button" value="-" id="gold_minus"> <input type="text" size="25" value="0" id="gold"> <input type="button" value="+" id="gold_plus"> </div> <div id="input_div6"> <input type="button" value="-" id="red_minus"> <input type="text" size="25" value="0" id="red"> <input type="button" value="+" id="red_plus"> </div> </div> </body> </html>

Any help, assistance or advice would be fantastic:)

Answer 1

I suggest to move your divs that hold the inputs to inside the pyramid blocks. Then add a relative to each block and absolute to each group of inputs.

Then you can use CSS to hover and show the inputs and also you can use absolute positioning to add the inputs exactly inside their "parents"

See below if my suggestion works for you

(you will note that some inputs may appear cutted because of small space, but this I will let to you to fix.)

 window.onload = function() { let colours = ["green", "brown", "blue", "yellow", "gold", "red"].map(id => { let colour = { elementCount: document.getElementById(id), elementPlus: document.getElementById(`${id}_plus`), elementMinus: document.getElementById(`${id}_minus`), counter: 0, }; colour.elementPlus.addEventListener("click", function() { colour.counter++; colour.elementCount.value = colour.counter; }); colour.elementMinus.addEventListener("click", function() { if (colour.counter > 0) { colour.counter--; colour.elementCount.value = colour.counter; } }); return colour; }); };

 .pyramid { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 100vmin; aspect-ratio: 9 / 15; background-color: white; display: grid; grid-template-columns: 1fr; }.pyramid>* { background: white; }.one { background-color: rgba(234, 27, 7, 0.97); }.two { background-color: rgba(244, 182, 0, 0.98); margin-top: 10px; }.three { background-color: rgba(249, 224, 41, 0.98); margin-top: 10px; }.four { background-color: rgba(4, 157, 252, 0.98); }.five { background-color: rgba(167, 118, 67, 0.99); gap: 0%;important. }:six { background-color, rgba(92, 213, 51. 0;98). },counter input[type=button]: input[type=text] { display; inline-block: width; 20px: background-color; transparent: outline; none: border; none: text-align; center: cursor; pointer: padding; 0px: color; black: height; 33px: font-family; 'Open Sans'. }:pyramid>div { position; relative. }:pyramid>div.hover:input-group { opacity; 1. }.pyramid:input-group { opacity; 0: position; absolute: top; 50%: left; 50%: transform, translate(-50%; -50%): } #container { width; 100px: height; 100px: position; relative: } #infoi { z-index; 10: } button { border-radius; 50%; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Colour counter</title> <link rel="stylesheet" href="css/style.css"> <script src="js/Main.js"></script> </head> <body> <div id="container"> <h1>Colour counter</h1> <div class="pyramid"> <div class="one"> <div id="input_div" class="input-group"> <input type="button" value="-" id="green_minus"> <input type="text" size="25" value="0" id="green"> <input type="button" value="+" id="green_plus"> </div> </div> <div class="two"> <div id="input_div2" class="input-group"> <input type="button" value="-" id="brown_minus"> <input type="text" size="25" value="0" id="brown"> <input type="button" value="+" id="brown_plus"> </div> </div> <div class="three"> <div id="input_div3" class="input-group"> <input type="button" value="-" id="blue_minus"> <input type="text" size="25" value="0" id="blue"> <input type="button" value="+" id="blue_plus"> </div> </div> <div class="four"> <div id="input_div4" class="input-group"> <input type="button" value="-" id="yellow_minus"> <input type="text" size="25" value="0" id="yellow"> <input type="button" value="+" id="yellow_plus"> </div> </div> <div class="five"> <div id="input_div5" class="input-group"> <input type="button" value="-" id="gold_minus"> <input type="text" size="25" value="0" id="gold"> <input type="button" value="+" id="gold_plus"> </div> </div> <div class="six"> <div id="input_div6" class="input-group"> <input type="button" value="-" id="red_minus"> <input type="text" size="25" value="0" id="red"> <input type="button" value="+" id="red_plus"> </div> </div> </div> </div> </body> </html>

How to overlay div over another div

Question

1 answers

solution1
1 2022-02-15 12:33:38

How to overlay div over another div

Question

1 answers

solution1 1 2022-02-15 12:33:38

solution1
1 2022-02-15 12:33:38