将按钮放在相对于该背景的背景上

Question

我正在写一个计算器应用程序。我有一个div与计算器的背景图像，该图像根据视口的大小自动缩放。另外，我想要相对于背景图像定位按钮，以便在移动/调整背景图像时也可以移动/调整它们的大小。

我已将所有按钮div放在计算器div中以尝试实现此目的，但是没有按钮可见。如果我将它们移出#calculator div，它们是可见的，但我可能不再使用％来相对于背景图像的大小调整大小/移动它们。我做错了什么？

JSFiddle：https://jsfiddle.net/s2bnukhz/

HTML：

<div id="calculator">
    <div id="LCD"></div>


    <div class="metaText" id="minus"></div>
    <div class="metaText" id="error"></div>
    <div class="metaText" id="memory"></div>


    <!-- Top row !-->
    <div class="button normal" id="buttonOn" onclick="Calc.buttonPressed('on');;"></div>
    <div class="button normal" id="buttonClear" onclick="Calc.buttonPressed('ce');"></div>

    <div class="button normal" id="buttonMRC" onclick="Calc.buttonPressed('MRC');"></div>
    <div class="button normal" id="buttonMSubtract" onclick="Calc.buttonPressed('M-');"></div>
    <div class="button normal" id="buttonMAdd" onclick="Calc.buttonPressed('M+');"></div>



    <!-- Numbers !-->
    <div class="button normal" id="button7" onclick="Calc.buttonPressed('7');"></div>
    <div class="button normal" id="button8" onclick="Calc.buttonPressed('8');"></div>
    <div class="button normal" id="button9" onclick="Calc.buttonPressed('9');"></div>

    <div class="button normal" id="button4" onclick="Calc.buttonPressed('4');"></div>
    <div class="button normal" id="button5" onclick="Calc.buttonPressed('5');"></div>
    <div class="button normal" id="button6" onclick="Calc.buttonPressed('6');"></div>

    <div class="button normal" id="button1" onclick="Calc.buttonPressed('1');"></div>
    <div class="button normal" id="button2" onclick="Calc.buttonPressed('2');"></div>
    <div class="button normal" id="button3" onclick="Calc.buttonPressed('3');"></div>

    <div class="button normal" id="button0" onclick="Calc.buttonPressed('0');"></div>
    <div class="button normal" id="buttonDot" onclick="Calc.buttonPressed('.');"></div>
    <div class="button normal" id="buttonPercent" onclick="Calc.buttonPressed('%');"></div>

    <!-- Operators !-->
    <div class="button normal" id="buttonNegPos" onclick="Calc.toggleMinus();"></div>
    <div class="button normal" id="buttonSqrt" onclick="Calc.buttonPressed('sqrt');"></div>

    <div class="button normal" id="buttonMultiply" onclick="Calc.buttonPressed('*');"></div>
    <div class="button normal" id="buttonDivide" onclick="Calc.buttonPressed('/');"></div>

    <div class="button normal" id="buttonSubtract" onclick="Calc.buttonPressed('-');"></div>
    <div class="button normal" id="buttonEquals" onclick="Calc.buttonPressed('=');"></div>

    <div class="button tall" id="buttonAdd" onclick="Calc.buttonPressed('+');"></div>
</div>

CSS：

#calculator {

    content: url('http://boktarnet.no/edanCalc/gfx/calculator.png');
    height: 100%;
    left: 10px;
    margin: 0;
    position: relative; 
    top: 10px;
    transition: 1s margin;
    width: auto;
    z-index: -1;

}

#calculator.centered {
    margin-left: 40%;


}

#LCD {
    color: black;
    font-family: LCD;
    font-size: 50pt;
    letter-spacing: 7px;
    position: absolute;
    text-align: right;
    left: 82px;
    top: 128px;
    width: 195px;
    height: 57px;

}



#log {
    border: solid black;
    /*float: right;*/
    font-family: LCD;
    font-size: 50pt;
    height: 80%;
    width: 57%;
    padding: 20px;
    letter-spacing: 6px;
    word-wrap: break-word;
    transition: 0.5s opacity;

}

#log .differentFont {
    font-family: 'Narrow';
    font-size: 40pt;
}

#btnHideLog {
    background-color: 4c6395;
    bottom: 40px;
    right: 40px;
    color: white;
    cursor: pointer;
    font-size: 15pt;
    height: 50px;
    padding: 10px;
    width: 100px;
    position: absolute;

}

/* General button appearance */
.button {

    cursor: pointer;
    position: absolute;

}

.button.normal { /* Add 1 pixel in size to be able to emulate pressing down */
    width: 55px;
    height: 51px;

}

.button.normal:active .button.tall:active {
    background-position: 1px 1px;
}

.button.tall { /* Add 1 pixel in size to be able to emulate pressing down */
    width: 55px;
    height: 115px;

}

/* Meta information on left hand side of LCD */
.metaText {
    position: absolute;
}

#minus {
    top: 158px;
    left: 59px;
    height: 4px;
    width: 11px;

    display: none;
    content: url('http://boktarnet.no/edanCalc/gfx/minus.png');

}

#error {
    top: 164px;
    left: 59px;
    width: 10px;
    height: 14px;

    content: url('http://boktarnet.no/edanCalc/gfx/error.png');
    display: none;
}

#memory {
    top: 141px;
    left: 59px;
    width: 11px;
    height: 16px;

    display: none;
    content: url('http://boktarnet.no/edanCalc/gfx/memory.png');
}

/* Specific buttons */
/* Number */
#button7 {
    left:  30%;
    top: 313px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_7.png');

}

#button8 {
    left: 89px;
    top: 313px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_8.png');
}

#button9 {
    left: 143px;
    top: 313px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_9.png');
}

#button4 {
    left: 36px;
    top: 363px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_4.png');

}

#button5 {
    left: 89px;
    top: 363px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_5.png');

}

#button6 {
    left: 143px;
    top: 363px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_6.png');

}

#button1 {
    left: 36px;
    top: 412px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_1.png');

}

#button2 {
    left: 89px;
    top: 412px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_2.png');

}

#button3 {
    left: 143px;
    top: 413px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_3.png');

}

#button0 {
    left: 36px;
    top: 464px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_0.png');

}

/* Operators */
#buttonDot {
    left: 90px;
    top: 464px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_dot.png');

}

#buttonPercent {
    left: 200px;
    top: 313px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_percent.png');

}

#buttonNegPos {
    left: 143px;
    top: 464px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_neg_pos.png');

}

#buttonSqrt {
    left: 200px;
    top: 262px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_sqrt.png');

}

#buttonMultiply {
    left: 200px;
    top: 363px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_multiply.png');

}

#buttonDivide {
    left: 252px;
    top: 363px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_divide.png');

}

#buttonSubtract {
    left: 252px;
    top: 412px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_subtract.png');


}

#buttonEquals {
    left: 252px;
    top: 464px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_equals.png');

}

#buttonAdd {
    left: 200px;
    top: 412px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_add.png');

}

/* Other buttons */
#buttonOn {
    left: 252px;
    top: 262px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_on.png');


}

#buttonClear {
    left: 252px;
    top: 313px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_clear.png');

}

#buttonMRC {
    left: 36px;
    top: 262px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_mrc.png');

}



#buttonMAdd {
    left: 143px;
    top: 262px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_m_add.png');

}

#buttonMSubtract {
    left: 89px;
    top: 262px;
    content: url('http://boktarnet.no/edanCalc/gfx/button_m_subtract.png');

}

Answer 1

您可以使用CSS3 flexbox完成此操作。这是一个例子：

http://codepen.io/anon/pen/WxbdeL

HTML：

<div class="grid">
  <div class="box box1"><div>one</div></div>
  <div class="box box1"><div>two</div></div>
  <div class="box box1"><div>three</div></div>
  <div class="box box1"><div>four</div></div>
  <div class="box box1"><div>five</div></div>  
  <div class="box box1"><div>six</div></div>  
  <div class="box box1"><div>seven</div></div>  
  <div class="box box1"><div>eight</div></div>  
  <div class="box box1"><div>nine</div></div>  
  <div class="box box1"><div>zero</div></div>  

CSS：

html, body {
  height: 100%;
  margin: 0;
}
.grid {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid > div {
  display: flex; 
  flex-basis: calc(33% - 40px);  
  justify-content: center;
  flex-direction: column;
}
.grid > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 50px; 
}

.box { margin: 20px;}
.box1 { background-color: grey; }