Facing problem with fixed position

hello…m facing some problem with fixed position…
see

i have a div with class named “content-text”… its css is
.content-text{
float:left;
width:100%;
height:496px;
position: relative;
padding:0 10px 5px;
z-index:1;
overflow:auto;;

}

when i scroll the browser window , that scroll top image goes outside to the content-text div…

i want make that… when i scroll the content-text div, the scroll top arrow should fixed in content-text div only… bt when i scroll browser window… it goes outside as i shown in image…
and i want content-text scrolleble

plz tell me…what is the solution… is ther any way… or can we hide that scroll top image when it goes out side the content-text div…
plz plz tell me ans?
waiting… :frowning: :frowning:

I think the only you can do this in CSS is with position: sticky; which is only supported in FireFox. You’ll need to use JavaScript.

jQuery Stick’em looks like it works. Demo here

Is the image of the arrow nested inside the .content-text div in your html? Maybe if you post your code for this page, we could see what is causing this.

Sounds like you should be absolutely positioning it to the bottom of .context-text and not using fixed positioning, Fixed positioning is always related to the viewport and not the element it resides in unlike absolute elements that take their stacking context from their nearest positioned ancestor.

nileshdesigner,

We need to see HTML and CSS. The code that you have posted is of no value to us. Note the name of the Category, “HTML & CSS”.

see the code… after content-text div, i use scroll to top image using anchor tag…
i want to fixed the position that arrow image in content-text div only…i mean when i scroll down the content-text div, its should fixed at their position… and it is fixed as i given position:fixed to scroll to top image…
bt the problem is, when i scroll down the browser window, that arrow image also goes outside… okkk it not problem but it should hide atleast when i scroll down browser window… arrow should inside content-text div only… bt it goes outside…

plz solv this…

no no… that asp code doesnt matter… i use html and css in that…plz see only that part…not ASP CODE…PLZ

CSS FOR SCROLLTOTOP

.scrollToTop {
  
   
    padding-top:50px;
    text-align: center;
  
    font-size: 12px;
    color: #888;
    text-decoration: none;
    position: fixed !important ;
    margin-left:700px;
    margin-top:340px;
 
    display:block;
    z-index:9999;
   
  
    background: url(../images/scrolltotop.png) no-repeat 13px 0;
  
}
    .scrollToTop span {
        margin-top:50px;
    }

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

If the asp code doesn’t matter, please do not include it.

Did you read Paul’s comment in post #4? Your CSS shows that you are still using position:fixed which is relative to the viewport.

Did you read our posting guidelines? We request that people post a working page that demonstrates the issue. Swatches of code do not usually tell us enough to solve a problem on a web site. CSS and HTML work together. Perhaps you can set up a working example on CodePen. Or post a link to your site, if possible.

In general, the parent container should be given position:relative and the targeted element (the circle with the arrow) should be given position:absolute so it is positioned relative to the parent container.

bt if i give the absolute position to arrow image…then it also goes down when i scroll down to content-text div…the arrow image was places at where the content ends…means at the last position… it not stable with absolute position in that div where i shown in first image abov…thats why i gave fixed position

We will need a link to your web site.

see the image…

now this is the CSS

.scrollToTop {
  
   
    padding-top:50px;
    text-align: center;
  
    font-size: 12px;
    color: #888;
    text-decoration: none;
    position: absolute !important ;
    bottom:10px;
    right:10px;
 
    display:block;
    z-index:9999;
   
  
    background: url(../images/scrolltotop.png) no-repeat 13px 0;
  
}
    .scrollToTop span {
        margin-top:50px;
    }

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

Hi,

Is this what you are trying to do.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
    position:relative;
    width:500px;
    margin:auto;
}
.content-text {
    height:496px;
    position: relative;
    padding:0 10px 5px;
    z-index:1;
    overflow:auto;
    background:#f9f9f9;
    border:5px solid #000;
}
.to-top {
    position:absolute;
    bottom:5px;
    right:25px;
    z-index:3;
    width:25px;
    height:25px;
    line-height:25px;
    text-align:center;
    border-radius:50%;
    background:rgba(0,0,0,0.7);
    color:#fff;
    font-weight:bold;
    font-size:20px;
    border:1px solid #000;
}
.to-top a {
    display:block;
    color:#fff;
    width:100%;
    height:100%;
    text-decoration:none
}
</style>
</head>

<body>
<div class="wrap">
        <div class="content-text">
                <div id="top">
                        <p>scrolling content top</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content</p>
                        <p>scrolling content bottom</p>
                </div>
        </div>
        <p class="to-top"><a href="#top">&uArr;</a></p>
</div>
</body>
</html>

Here it is on codepen.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.