CODEWITHSUNDEEP
htmlcssscrollposition
Ryan Saxe
Ryan Saxe

Reputation: 17829

css position absolute and fixed not working propoerly

There is a siderbar and we do not want it to scroll. So clearly either position:fixed or position:absolute should do the trick, but they don't!

The following happens with position:fixed:

the sidebar glitches on scroll and breaks up and just acts oddly

The following happens with position:absolute:

the sidebar scrolls rather than staying in place.

Here is the css for the sidebar (not correct id name)

#sidebar{
font-family: 'Jura', sans-serif; 
position: fixed; 
margin-top:80px; 
margin-left:1020px;
font-size:18px;
padding-top:0px; 
padding-bottom:17px; 
text-align:center; 
height:420px; 
width:300px; 
overflow:hidden;
solid #000000;
color:#000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color:transparent;
opacity: 1;
z-index:999;
}

this is a link to the blog so you can maybe check with developer tools to see the glitching and what exactly is happening.

Why is the positioning acting so odd, and how can that be fixed?

And this happens in safari and chrome, I do not have firefox or internet explorer installed, so I am not sure the response for those browsers

picture of glitch, splits sidebar image up and occasionally will show some of the text:

enter image description here

Upvotes: 2

Views: 1735

Answers (2)

daniel
daniel

Reputation: 1433

Remove overflow:hidden from the element with the four-letter F-word.

#???? {
    font-family: 'Jura', sans-serif;
    position: fixed;
    margin-top: 80px;
    margin-left: 1020px;
    font-size: 18px;
    padding-top: 0px;
    padding-bottom: 17px;
    text-align: center;
    height: 420px;
    width: 300px;
    /*overflow: hidden;*/ <---- remove for "glitch" to go away
    color: #000000;
    -webkit-transition: opacity 0.3s linear;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    background-color: transparent;
    opacity: 1;
    z-index: 999;
}

The element is named a censored (I assume) F word!

Upvotes: 1

km6zla
km6zla

Reputation: 4877

You want the css overflow property: Overview. Hidden or visible should do the trick.

Upvotes: 0

Related Questions