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

An element generated through JavaScript fails to display on the webpage

ClickAwayListener's callback function stops executing midway

Tips for creating multiple files using nodejs and express

Conceal mobile button

hierarchical browsing system

Exploring numerical elements in interactive content

Need to return false even though Jquery form check currently returns true

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

Over time (a few days), the setInterval function causes the react app to become unresponsive

Is there a way to hide the <v-otp-input> field in a Vue.js application?

Executing a SQL query using a JavaScript variable as a parameter

I would prefer not to add another database table just to differentiate between team members and friends. Can you provide assistance with this?

Using Jquery & HTML5 for Seamless Transition between Portrait and Landscape Modes

Exploring the possibilities of custom layouts for specific routes within the pages directory in Next.js

Display a tooltip upon the page's initial load and automatically hide it afterwards

Discovering hidden elements using Overflow:hidden

Node.js exporting fails due to an undefined variable

The parent div of the clicked hyperlink is not displaying the ajax response

Utilizing DOMPDF in conjunction with jQuery to generate PDF files

One question I have is how I can successfully send a value within the RxJS subscribe function