Images with fixed positions will be displayed in one div and hidden in all others

I am struggling with integrating multiple images into my webpage in a fixed position. These images should only be visible within their designated divs and scroll along with the content, hiding behind other divs.

Unfortunately, I can't seem to locate the example that initially inspired me. My apologies for the inconvenience.

Edit: Apologies for omitting the code earlier, the paragraphs served as placeholders while testing the scrolling functionality.

<div id="Over">
<div id="Job" class="grey">
    <p>Blalbalblablalbalbalblbalbalab</p>

    ... (content continues)
    
    <img class="changing" id="JobImage" src="~/images/JobRapati.png" />
</div>

... (more divs and content)

</div>

CSS:

.changing
{
position: fixed;
right: 0;
top: 30%; 
}

Answer №1

It's a bit tricky to find a straightforward solution for your question, but with some creative thinking, you can work around it.

I created a code snippet that might give you some ideas. Does this resemble what you're looking for?

html, body {
  width: 100%;
  height: 200%;
  margin: 0;
}

.container {
  z-index: 2;
  width: 100%;
  margin-top: 200px;
  height: 100%;
  background-color: red;
}

.img {
  position: fixed;
  z-index: -1;
  top: 30px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: aquamarine;
}

Here's the HTML structure:

<div class="img"></div>
<div class="container"></div>

You can also check out the codepen I made: https://codepen.io/montik/pen/JExLRW

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Quiz application utilizing MySQL and JSP technology

I've been developing a Web Application using JSP to host MCQ quizzes. The questions are stored in a MySql Database table called 'qna', with each question having 10 choices. My goal is to design the quiz so that each question appears on a new ...

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

<img class="cl" src="photo/198.jpg"/></br> <audio class="cs" controls> <source src="audio/198 banu nagamothu.mp3" type="audio/mpeg"> </audio> I prefer not to have audio controls initially, but when the image i ...

Why doesn't AngularJS validation function properly with input elements of type "number"?

Struggling with Angularjs validation here. Ng-pattern seems to work fine only when the input type is text. However, when the input type is number, ng-pattern doesn't seem to work, although required, min, and max attributes still function. <input t ...

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

Issue with the Z-Index property not functioning as expected on unordered lists within a dropdown menu

I have a dropdown menu that opens to the left, but it is displaying underneath the content. I attempted adjusting the z-index of the content to 1 and the dropdown to 2, however, this did not resolve the issue. Here is a sample in jsFiddle: https://jsfiddl ...

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

Conceal information within a label

I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code: <div class="smFormInlineFormCont"> <div class="smInli ...

JavaScript date input formatting with HTML

When using the input date picker in HTML, the default format displayed is MM-DD-YYYY. <input type="date" id="gdatum" /> Is there any method to change the mask to DD-MM-YYYY? ...

Highlighted Navigation Options

When visiting , take note of the top navigation bar. The background color on this page is white, but as you navigate to other pages, the tab changes to a different color. How can you modify this behavior and change the class? Is PHP or jQuery necessary f ...

What steps do I need to take to extract the date and month from a single datepicker using the code below?

<div class="col-md-3 pull-left" style="padding:9px"> <input type="text" id="datepicker" class="form-control"> </div> The HTML and C ...

Error in Compiling HTML Elements Collection<<Element>

Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a s ...

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

Exploring user inputs and displaying variables using JavaScript and HTML 4.01

I was testing some code and I'm facing an issue that I can't figure out: <HTML> <head> <title> Page 1 </title> <script> function myFunction() { var x=document.getElementById("myEmail") document.write(x) } </scr ...

Element on navigation bar extending full width of the page

As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the e ...

Prevent browser menus from opening by using JavaScript without triggering a new popup window

In seeking to safeguard the source code of my website, I am looking to prevent any unauthorized access. Therefore, I aim to deactivate all common methods of accessing the code such as Ctrl+U, Ctrl+Shift+I, F12, and browser menu options. ...

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

Link an HTML contact form to an Express.js backend server

Hey there, I'm a newcomer to web development and I've been working on creating the backend code for a contact form, but it keeps throwing errors. Here's my HTML code for the contact form: </div> <div class="row"> ...

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

I have created an array that stores various images using angularJS: $scope.docImg = [ '../../Content/Image/BackGrounds/abra.png', '../../Content/Image/BackGrounds/background_black.jpg', '../../Content/I ...

Unable to integrate an if/else statement into the JSON reply

Working with an API to retrieve data and display images from it. I am attempting to implement an if/else statement that will show photos if the search term yields results in the response, and display a message indicating no results if it does not. Curren ...

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...