https://jsfiddle.net/o207fo2L/

I want to move the menu and the traveling block 30 pixels down, that is, the button should be lower and the menu block itself too. I tried to change the top parameter, but for some reason it does not affect anything. It seemed to me that in the case of a fixed element is fixed on the visible area of ​​the screen and they can be moved using the parameters top left. Moreover, if the top parameter is removed, the button will generally shift to the left. Moreover, if you write

top: 15px; bottom:150px;

That shift will nevertheless be, however, apparently, precisely at the lower boundary of the element. Why so, who can explain all this?

And yet, it may be better to use the margin-top to shift down, since there will be a header at the top?

    1 answer 1

    It is set without problems. .hidden-menu, .btn-menu { top: 30px; } .hidden-menu, .btn-menu { top: 30px; }

     html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family:'Open Sans', sans-serif; } /*-----------------Код для левого меню-----------------*/ .hidden-menu { position: fixed;//Видимо чтобы не менять своего положения при прокрутке экрана list-style:none; padding: 10px; margin: 0; width: 200px; background-color: #F1F1F1; height: 100%; top: 0; z-index: 2; left: -220px; transition: left .2s; top: 30px; } .hidden-menu-ticker { display: none; } .btn-menu { padding: 5px; position: fixed;//Чтобы сделать label блочным элементом, после чего можно применить к нему width top: 15px; left: 5px; cursor: pointer; transition: left .23s; z-index: 3; width: 25px; top: 30px; } .btn-menu span { position: relative; display: block; height: 3px; background-color: black; margin: 5px 0 0; transition: all .1s linear .23s; } .btn-menu span.first { margin-top: 0; } .hidden-menu-ticker:checked ~ .btn-menu { left: 180px; } .hidden-menu-ticker:checked ~ .hidden-menu { left: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.first { -webkit-transform: rotate(45deg); top: 8px; } .hidden-menu-ticker:checked ~ .btn-menu span.second { opacity: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.third { -webkit-transform: rotate(-45deg); top: -8px; } /*-----------------Конец кода для левого меню-----------------*/ 
     <input type="checkbox" id="hmt" class="hidden-menu-ticker"> <label class="btn-menu" for="hmt"> <span class="first"></span> <span class="second"></span> <span class="third"></span> </label> <ul class="hidden-menu"> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul>

    • Thank. I can not understand why it works only if you swap top: 15px; left: 5px ;? That is, if you immediately put the left will work, but not vice versa. - GuitarFan