Когда я делаю размер экрана меньше, кнопка и опция выбора перекрываются согласно фрагменту. Между кнопкой и опцией выбора должен быть промежуток в дюймах (этот вывод поступает, когда экран развернут в максимальном размере). Может ли кто-нибудь, пожалуйста, помогите в этом, если я добавлю что-нибудь еще для вывода. Размещение кода html и css ниже:
css:
body {
margin: 0;
padding: 0;
background: #262626;
}
h3
{
text-align: right;
color: #C0C0C0;
padding-top: 10px;
}
.box {
position: absolute;
top:40%;
left: 60%;
transform: translate(-50%, -50%);
}
.box1 {
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
}
.box2 {
position: absolute;
top: 60%;
left: 60%;
transform: translate(-50%, -50%);
}
.box select {
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.box1 select {
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.box2 select {
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.ssystem
{
position: absolute;
top:40%;
left: 41%;
transform: translate(-50%, -50%);
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.sub
{
position: absolute;
top:50%;
left: 41%;
transform: translate(-50%, -50%);
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.subsub
{
position: absolute;
top:60%;
left: 41%;
transform: translate(-50%, -50%);
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
#button
{
background: #a9a9a9;
color: #fff;
position: absolute;
height:30px;
width:84px;
left:63%;
top:70%;
border: none;
color: arial;
font-size: 16px;
}
#button:hover
{
background: red;
cursor: pointer;
}
<body style="background-image: url(./img/bkgrnd.png);background-size: cover;">
<h3>welcome user!!</h3>
<button class="ssystem">System</button>
<button class="sub">Sub-System</button>
<button class="subsub">Sub-Sub-System</button>
<div class="box" id="sys">
<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</div>
<div class="box1" id="sub">
<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</div>
<div class="box2" id="sub1">
<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</div>
<input type="submit" value="Submit" id="button">
</body>