This should be rather simple but position: fixed and position absolute do not work!
code:
<div id="parent">
<div id="jqueryUIProgressBar"></div>
<!-- dynamic content -->
<div></div>
... ... ...
<div></div>
</div>
this div is about 300px in height, and the content inside is vertically scrollable. The progress bar appears at the top of the div when scrolled right to the top as expected.
But when scrolling down, I would still like the progress bar to appear at the top of the div!
When i scroll down the progress bar scrolls with the rest of the content!
I want it to stay where it is at the top!
ive tried:
#jQueryProgressBar {
position: fixed
}
along with position:absolute, left:0, top:0, float:left ALL SORTS
Just some quick help please
You need to set position: fixed and then set top and left as well, like this: (untested, should work)
#jQueryProgressBar {
position: fixed;
top: 200px; /*change*/
left: 100px; /*change*/
}
Related
I want to have an object falling from the sky while scrolling down the page. The idea is: You have the object div not moving. It should be in the center of the page (50 px from the top of its parent) and when you scroll down it should scroll down too.
Whats the catch? The object is in another div. I only want the object to be visible inside this div. So not on the entire website.
What have I tried?
1: Fixed positioning, but then it shows up on the entire page, z-index does not work with fixed.
2: Relative positioning on the parent and absolute on the child but then the object div does not go down the page when I scroll.
Visual representation::
On scroll down:
React Component:
<div className="container">
<div className="container--object">
<img src={object}/>
</div>
</div>
CSS
.container {
min-height: 100vh;
position: relative;
}
.container--object {
position: absolute;
top: 50px;
}
My parent component is the homepage. And the siblings of this react component are other div's. The functionality to make the div move down the page is what I am struggling with, how can I move the object div down? Is there a way to base it off the top of the browser?
Ok if i understood correctly, you want something like this? I used an image and some test text
.container {
min-height: 100vh;
height: 2500px;
position: relative;
}
.container_object {
position: fixed;
top: 50px;
}
<div class="container">
<div class="container_object">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div style="position: absolute; top:500px">
TEEEEEEEEEEEEST 111111111
</div>
<div style="position: absolute; top:800px">
TEEEEEEEEEEEEST 222222222
</div>
</div>
You should see this snippet in full page
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
I would like to be able to create a div that spans the entire width of the screen. The problem is, this should work along with Weebly's design system, which places it inside a div of fixed width.
The content is created as the following:
#main-wrap {
width:100%;
}
.container {
margin: 0 auto;
width: 960px;
position: relative;
}
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
Inside {content} is where Weebly does its magic and puts all your stuff. I tried to directly embed some code:
.wide {
position: absolute;
left:0; right:0;
width: 100vw;
background: #aaccff;
}
<div class="wide">
Test
</div>
But this did not work, and the wide div was wider than the screen, but only starts at the same left position as the content div.
Does anyone know how to get a 100% wide div inside of the container. I could also make container 100% wide, but then all of the Weebly widgets go the full length of the screen, and its not clear how I can modify the CSS To make them have fixed width.
Thanks!
It's because of that the parent has is relative positioned. So, remove position: relative; from element .container
http://axol.de/HTML/Projects.html
On this page you can see that "Impressum" is in the middle of the page, instead of the bottom right. Can anyone tell me why this happens?
I dont want to add "height:100%" to my body, because then there is a scrollbar on the y axis for no reason...
How can I put it on the bottom page without having to give body any height?
This happens because you did not set the position of the <div>-Tag. And by default it is directly under the previous element.
Set as a footer (div):
position: fixed;
bottom: 0px;
for your right alignment (div)
width: 100%;
text-align: right;
And for a little distance to the rigth border (a)
margin-right: 10px;
And by the way: you can hide scrollbars with overflow:hidden (body)
Edit:
<div ... style="position:fixed; bottom:0px; width:100%; text-align:right">
...
<a ... style="margin-right:10px"></a>
...
</div>
Ok so basically I have:
<div style="overflow-x:scroll">
<div class="content">
<div class="text"></div>
<div class="seperator"></div>
</div>
</div>
I want to position the bottom div (its basically a sort of horizontal line) on the bottom of the content div
I've tried the position: absolute embedding a position: relative div tag, but because the top div is scrollable the seperators remain fixed when I scroll
How would I go abouts getting this done (I have to use the seperator in the class=content div so it doesnt ruin the background I have set for it
Edit: Ok so my seperator has some shadows and stuff so I need it to overlay with the content, so I need some kind of absolute positioning, but not to the page, to the 'top div'
Is there a way to relatively position it so it'll always be at the bottom of the parent div?
#top-div { position:relative; /* fixed height or width */ }
#bot-div { position:absolute; bottom:0 }
Change this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5)
position: absolute;
bottom: 0;
}
To this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5);
}
If I am not understanding your question please feel free to correct me.