Fixed positioning of a div causes it to move further away when zooming out

Question

Fixed positioning of a div causes it to move further away when zooming out

Greetings to all! I am looking to achieve a scrolling effect for a div area as I scroll down the page. To accomplish this, I have utilized the CSS property position:fixed to lock the div area within another div called "page". Below is the corresponding CSS:

.page {
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

However, I encountered an issue where zooming out causes the fixed div to move away from the main div area "page". How can I resolve this problem?

Here are the styles for the fixed div elements:

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position:fixed;
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position
}

javascript html css

Answer 1

Answer №1

Here is the HTML code:

<div class="container">
    <div class="fixed-block"></div>   
</div>

And here is the CSS code:

.container {
    position: relative;
    width: 300px;
    height: 1200px;
}

.fixed-block {
    width: 300px;
    height: 30px;
    display: block;
    position: fixed;
    background-color: #000;
    top: 0;
}

You can view this code in action on this JSFiddle link.

Answer 2

Here is the HTML code:

<div class="container">
    <div class="fixed-block"></div>   
</div>

And here is the CSS code:

.container {
    position: relative;
    width: 300px;
    height: 1200px;
}

.fixed-block {
    width: 300px;
    height: 30px;
    display: block;
    position: fixed;
    background-color: #000;
    top: 0;
}

You can view this code in action on this JSFiddle link.

Fixed positioning of a div causes it to move further away when zooming out

Answer №1

Similar questions

Store input values for increment and decrement in local storage upon page reload

Using jQuery to Send Data Back to Parent Popup Window

Swapping link positions with jQuery

Monitoring changes in the size of the parent element with an AngularJS directive

The small screen @media query is malfunctioning and not displaying correctly

Converting JSON data into a JavaScript array and storing it in a variable

Tips for dynamically populating a dropdown menu in Laravel with Ajax and JQuery

Passing data from a parent node to a child node using JavaScript and the D3.js library

Establish initial content for the specified div area

Utilizing Vue.js for the selection of multiple elements

Automatically trigger a PHP reload/refresh based on user input

What are the appropriate levels of access that an operating system should provide for web-based scripting?

Instructions for sending an array of integers as an argument from JavaScript to Python

The issue with window.addEventListener failing to update state when the scrollY is not at zero persists during route changes

What is the best approach to retrieve a username from a SQL database using AJAX within a Flask application

The contents of a JSON Object will not be logged by Node, no matter the approach

I am looking to edit specific lines of HTML code on a website in order to automatically select a checkbox. Is this possible?

The element is being hidden by the Bootstrap visibility utility even though it should be visible

Learn how to leverage dynamic imports for a single use case in NextJS

Configuration object for Webpack is not valid