@media only screen and (min-width: 480px) {
html {
background: url(https://oboi.ws/filters/earlybird_17_9338_oboi_temnyj_fon_1920x1080.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
}
#panel {
width: 30em;
height: 35em;
border-color: #83ff79;
border-style: double;
border-width: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0 0 10px black;
-moz-box-shadow: 0 0 10px black;
box-shadow: 0 0 50px #68ffae;
background: rgba(205, 208, 206, 0.6);
margin: 0 auto;
text-align: center;
position: relative;
top: 200px;
}
#panel #res_name {
padding-top: 40px;
text-align: center;
width: 100%;
font-family: 'Fjalla One', sans-serif;
height: 130px;
color: #ffffff;
font-size: 40px;
}
/*КНОПКА*/
#test1 {
position: absolute;
margin-top: -80px;
margin-left: -57px;
height: 50px;
width: 180px;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
background: #a0a0a0;
padding: 10px 20px 10px 20px;
border: solid #808080 2px;
text-decoration: none;
;
}
#result1 {
position: relative;
font-size: 30px;
left: 150px;
top: -70px;
display: inline-block;
z-index: 0;
}
#test2 {
position: absolute;
margin-top: -10px;
margin-left: -76px;
height: 50px;
width: 180px;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
background: #a0a0a0;
padding: 10px 20px 10px 20px;
border: solid #808080 2px;
text-decoration: none;
;
}
#result2 {
position: relative;
font-size: 30px;
left: 132px;
top: -3px;
display: inline-block;
z-index: 0;
}
#test3 {
position: absolute;
margin-top: 60px;
margin-left: -95px;
height: 50px;
width: 180px;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
background: #a0a0a0;
padding: 10px 20px 10px 20px;
border: solid #808080 2px;
text-decoration: none;
;
}
#result3 {
position: relative;
font-size: 30px;
left: 113px;
top: 70px;
display: inline-block;
z-index: 0;
}
#test4 {
position: absolute;
margin-top: 130px;
margin-left: -114px;
height: 50px;
width: 180px;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
background: #a0a0a0;
padding: 10px 20px 10px 20px;
border: solid #808080 2px;
text-decoration: none;
}
#result4 {
position: relative;
font-size: 30px;
left: 95px;
top: 135px;
display: inline-block;
z-index: 0;
}
#test5 {
position: absolute;
margin-top: 200px;
margin-left: -129px;
height: 50px;
width: 180px;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
background: #a0a0a0;
padding: 10px 20px 10px 20px;
border: solid #808080 2px;
text-decoration: none;
;
}
#numberID {
position: relative;
font-size: 30px;
left: 120px;
top: -125px;
display: inline-block;
z-index: 0;
}
#test7 {
margin: 350px auto;
min-height: 200px;
min-width: 200px;
-webkit-border-radius: 50%;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
color: #ffffff;
font-size: 30px;
background: #363636;
padding: 10px 20px 10px 20px;
border: solid #808080 2px;
-webkit-box-shadow: 0px 0px 160px #0aff0a;
font-family: Arial;
text-decoration: none;
}
#test7:hover {
background: #848484;
text-decoration: none;
}
text-decoration: none;
}
}
<html lang='en' class=''>
<head>
<title>TECH_USER</title>
<script src='//static.codepen.io/assets/editor/live/console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/login.css">
<script src="js/user.js"></script>
</head>
<body>
<!-- панель позьзователей-->
<div id="panel">
<div id="res_name">USER</div>
<div id="numberID">0</div>
<!--кнопка РАБОТА -->
<button id="test1" onclick="myEvent1()"><p id="text1" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">РАБОТА</p></button>
<div id="result1">0</div>
<!--кнопка КОМАНДИРОВКА -->
<button id="test2" onclick="myEvent2()"><p id="text2" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">КОМАНД.</p></button>
<div id="result2">0</div>
<!--кнопка ОТПУСК -->
<button id="test3" onclick="myEvent3()"><p id="text3" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">ОТПУСК</p></button>
<div id="result3">0</div>
<!--кнопка ОТСУТСТВИЕ -->
<button id="test4" onclick="myEvent4()"><p id="text4" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">НЕ РАБ.</p></button>
<div id="result4">0</div>
<!--кнопка ВЫХОД -->
<button id="test5"><p id="text5" style="position:absolute;color:black;top:6px;left:30px;font-size:30px;">ВЫХОД</p></button>
</div>
<button id="test7" style="display:none;"><p id="text7" style="position:relative;color:#ffffff;top:-5px;left:0px;font-size:39px;">ВЫХОД</p></button>
</body>
</html>
Ребята ,есть проблема, скачут блоки то влево то в право в зависимости от браузера , можете подкорректировать что не так ,пожалуйста. В хроме все более менее вроде как