The element is anchored within a div, but its position is dependent on a JavaScript script

Question

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as either relative or absolute while also ensuring that Main_Card has overflow-y set to auto for scrolling purposes on smaller screens.

The issue occurs when Main_Card's content needs to be scrolled - not only does the text scroll properly, but the icon also scrolls along with it. Setting the icon's position to fixed is not a viable solution as it would fix the icon to the entire page rather than just within Main_Card.

Is there a way to make the icon unscrollable in this scenario? Any suggestions would be greatly appreciated. Thank you and have a wonderful day!

javascript jquery html css

Answer 1

Answer №1

To provide a clearer understanding, it would be beneficial to include the code along with the question.

From what I comprehend, setting the overflow property on the text container should address the issue.

body, html {
  height: 100%
}
.card {
  position: relative;
  background: orange;
  width: 200px;
  height: 100%;
  
}

.card-text {
  overflow-y: auto;
  height: 100%;
}

.card-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: green;
  color: white;
}

<div class="card">
  <div class="card-icon">
   </div>
  <p class="card-text">
    Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
     Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
     Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
    
  </p>
</div>

Answer 2

To provide a clearer understanding, it would be beneficial to include the code along with the question.

From what I comprehend, setting the overflow property on the text container should address the issue.

body, html {
  height: 100%
}
.card {
  position: relative;
  background: orange;
  width: 200px;
  height: 100%;
  
}

.card-text {
  overflow-y: auto;
  height: 100%;
}

.card-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: green;
  color: white;
}

<div class="card">
  <div class="card-icon">
   </div>
  <p class="card-text">
    Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
     Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
     Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
    
  </p>
</div>

Answer 3

Answer №2

Using CSS to Keep Element Fixed Relative to Parent:

div{
  position:relative;
  overflow-y:auto;
  height:100px;
  width:200px;
  background:#eee;
  margin: 0 auto;
}
div i{
  position:fixed;
  /*Avoid assigning top, left, right, bottom properties! */
  margin: 10px;
  background: red;
  padding: 20px;
}
div p{height:400px;border:4px dashed blue;} /*creating scrollbars*/

<div>
  <i></i>  
  <p></p>
</div>

position fixed, if you add left, right, top, bottom, the element will relate to the viewport instead of the parent.
By not adjusting those properties, you can make the browser behave as you intend.

Answer 4

Using CSS to Keep Element Fixed Relative to Parent:

div{
  position:relative;
  overflow-y:auto;
  height:100px;
  width:200px;
  background:#eee;
  margin: 0 auto;
}
div i{
  position:fixed;
  /*Avoid assigning top, left, right, bottom properties! */
  margin: 10px;
  background: red;
  padding: 20px;
}
div p{height:400px;border:4px dashed blue;} /*creating scrollbars*/

<div>
  <i></i>  
  <p></p>
</div>

position fixed, if you add left, right, top, bottom, the element will relate to the viewport instead of the parent.
By not adjusting those properties, you can make the browser behave as you intend.

The element is anchored within a div, but its position is dependent on a JavaScript script

Answer №1

Answer №2

Using CSS to Keep Element Fixed Relative to Parent:

Similar questions

Obtaining a subset of data from firebase

three.js fur effect not appearing on screen

Step-by-Step Guide for Uploading an Entire Folder and Its Contents

A step-by-step guide on implementing a callback function

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

Creating a "Container" component in Vue.js step by step

Swap the text within the curly braces with the div element containing the specified text

One method for routing pages in React Router is to have a shared component that is displayed on multiple pages, as well as a

Choosing the right framework for a web application

What is the best way to adjust the spacing based on the width of the screen?

Fade out effect in jQuery upon reloading the page

Iterate through an array to dynamically assign values to variables using string elements

Should I utilize a single form or one for each table row in asp.net mvc?

Tips for effectively managing index positions within a dual ngFor loop in Angular

Using CSS to create various h1 headings with distinct colors and sizes

Press the button to modify the titles of the table

Prevent request timeouts in Express.js

Node.js offers a variety of routing options and URL endpoints

Revamping Footer Text

Click to enlarge font size across the entire project