I have an absolute nav bar that must stay at the top of the page. Underneath it is the main class called layout. Inside the layout, I have two more classes sidebar and popup. The popup is hidden. The sidebar has a class called search-bar that has to stay at the top of the sidebar so it has a sticky position with 0 top property. If you scroll through the sidebar the search bar stays at the top, however, the content moves up and ends up hiding under the navigation bar.
To fix this I have set the layout position to fixed. The popup is absolute and it popups when the search icon within the search bar is pressed. The problem is when I solve the issue by setting the layout to fixed, the screen is no longer interactable when the popup comes on, not just the popup but the whole screen as well.
.navigation {
position: absolute;
}
.layout {
position: fixed;
margin-top: 100px;
}
.sidebar {
width: 30%;
}
.searchbar {
position: sticky;
}
.popup {
position: absolute;
}
<div class="navigation">
</div>
<div class="layout">
<div class="sidebar>
<div class=" search-bar ">
</div>
</div>
<div class="popup ">
</div>
</div>
I tried different types of positionings for the layout and they all result in content going under the nav bar.
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
I have a sidebar on page which should have background color all the way to the right side so it can't be inside container (or it can?). I am struggling with positioning it so that the content and sidebar don't overlap.
But my question is how can I push the sidebar on smaller screens after content? (without having duplicate content)
I am trying to mess a little as possible with Bootstrap code so that it doesn't break somewhere later
https://jsfiddle.net/vzoz53zm/
#sidebar {
position: absolute;
right: 0;
width: 35%;
max-width: 300px;
}
#media only screen and (max-width: 480px) {
#sidebar {
position: relative;
width: 100%;
}
}
<div id="sidebar">
<p>
SIDEBAR
</p>
</div>
<div class="container">
<div class="main">
CONTENT
</div>
</div>
You just need to move your HTML for the side bar after the container, and add top: 0; to your #sidebar styles. At the moment your sidebar appears first in the document, you have removed it from the document flow using absolute positioning, but when you insert it back in (setting it to position: relative;) it goes back into the document above the .container div.
See fiddle. https://jsfiddle.net/vzoz53zm/1/
Add top:0 styles to the sidebar styles, it will meet the requirement.
Joomla-based website with DIV sections dividing the page within the template.
I need to display a graphic that displays on top of all content on the page. Using position: relative or position: absolute, it only adjusts the position within the current DIV section.
Using position: fixed, I am able to set its actual position, which is great. However, regardless of my z-index, some DIVs it appears above, others behind.
At a loss as to how to display this image over top of everything on the screen regardless as to its DIV, z-index, etc.
Use position absolute but adjust changes caused by not displaying img in that flow by for eg margin, padding, height etc. If you are floating img you will need to fix position too.
<div>
<div>before img</div>
<img class="img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute-fix">after img</div>
</div>
.img--absolute{
position: absolute;
}
.absolute-fix{
margin-top: 70px;
}
<div class="img-container--float-fix">beffor img</div>
<div>before img</div>
<img class="img--float img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute--float-fix">after img</div>
</div>
.img-container--float-fix{
position: relative;
}
.absolute--float-fix{
padding-right: 60px;
}
.img--float.img--absolute{
right: 0;
}
http://jsfiddle.net/o5sboe1s/
I am trying to make content div show a horzontial scroll bar once the page becomes too narrow for the content inside of the content div. Currently, my setup is as follows:
HTML:
<div id="LeftNavigation">
<div id="TopNav">Menu1</div>
<div id="BottomNav">Menu2</div>
</div>
<div id="ContentContainer">
<div style="float: left; width: 500px">Content1</div>
<div style="float: left;">Content2</div>
<div>
CSS:
#LeftNavigation {
float: left;
}
#TopNav,
#BottomNav {
width: 165px;
}
#ContentContainer {
margin-left: 180px;
min-height: 150px;
padding: 10px;
}
I'd like to have my page work like the image below. Where my content container has a minimum width of say...600 pixels and then when the page width gets below the combined width of the menu and content(including margins), a scroll bar shows up. I can't figure out how to get this to work properly, though. My ContentContainer div keeps wrapping below my LeftNavigation div whenever the page becomes too narrow. Thanks in advance.
You need to add a size to ContentContainer and add overflow-x:auto. The scroll bar will show up on ContentContainer, not the entire page as you illustrate.
If you want it where shown in the diagram you'll need to make a fake scrollbar and use JavaScript to make it work.
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*/
}