如何将div叠加在另一个div上
[英]How to overlay div over another div
问题描述
I need assistance with overlaying my button divs over another my Trapezoids
我需要帮助将我的按钮 div 覆盖在另一个我的梯形上
I am using an array to store the colours then using the map function to map each button to the corresponding colour type.我使用一个数组来存储颜色然后使用 map function 到 map 每个按钮对应的颜色类型。
When a user hovers over the colour buttons must appear to increase or decrease the counter by 1, to a minimum of 0.当用户将鼠标悬停在颜色按钮上时，必须显示为将计数器增加或减少 1，最小为 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?请参阅下图了解我要实现的目标：请参阅链接图像图像我应该使用 z-index: [number] 进行分层吗？
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:)任何帮助、协助或建议都会很棒:)
1 个解决方案
解决方案1
1 2022-02-15 12:33:38
I suggest to move your divs that hold the inputs to inside the pyramid blocks.我建议将保存输入的 div 移动到金字塔块内部。 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"然后你可以使用 CSS 到 hover 并显示输入，你也可以使用绝对定位将输入恰好添加到他们的“父母”内
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.