I have such a div, and this one

Code:

#under { font-family: var(--righteous-font); position: fixed; left: 0; bottom: 0; color: #fff; width: 100%; background: rgba(0, 0, 0, 0.8); } span.gh { position: relative; top: -10px; left: 10px; } span.vk { position: absolute; top: -10px; right: 10px; } 
 <div id="under"> <span class="s1"> Text_1 <a href="..." target="_blank"> <img class="logo" src="res/s1.png"> </a> </span> <span class="s2"> <a href="..." target="_blank"> <img class="logo" src="res/s2.png"> </a> Text_2 </span> </div>

The div is displayed correctly, as I want, but if I open the page from the smartphone, as the page is increased, the div remains in its place and shifts, how to make the div always be in one place?

  • In other words, you want, at the moment when the user will scale the page, div changed its position relative to the page, but retained its position relative to the screen? - Dmytryk
  • @ Dmytryk, Yes, that's right - TheTOXIN
  • div in this situation css properties always remains in place, increasing the page and changing the width of the browser window is different. The very example in the Chrome browser, if you scale the browser view through ctrl +, then yes, this block will go to the right, but if you change the width through the responsive tool, your block will remain in place as it has a relative width of 100% - undefined
  • @SelinCorvin, if there is an event that is triggered when scaling, then I think you can do this. - Dmytryk
  • @ Dmytryk and sense, because scaling ctrl + doesn’t relate to adaptability, especially since there is 100% width, and if you need to track the width change, then $ (window) .resize (function () {}) to help - undefined

1 answer 1

 #under { font-family: var(--righteous-font); position: absolute; left: 0; bottom: 0; color: #fff; width: 100%; z-index: -1; background: rgba(0, 0, 0, 0.8); } span.gh { position: relative; top: -10px; left: 10px; } span.vk { position: absolute; top: -10px; right: 10px; } 
 <div id="under"> <span class="s1"> Text_1 <a href="..." target="_blank"> <img class="logo" src="res/s1.png"> </a> </span> <span class="s2"> <a href="..." target="_blank"> <img class="logo" src="res/s2.png"> </a> Text_2 </span> </div>