Got a fixed div with a tag cloud hanging on a side of a page. It overflows footer divs. And i need it to scroll under. Can't really set a z index to -1 since it's on top of another div.
Tried setting up z-index where footer would have greater one. Didn't work. Any ideas?
Thanks!
Old topic but I had the same issue on my project. Z-index works... if you give the element it should scroll under a position. So let's say you have:
<div id="floating">I'm a cloud</div>
<footer>I'm a rock</footer>
Then your CSS should look something like this:
#floating { position: fixed; top: 100px; right: 100px; z-index: 50; }
footer { position: relative; z-index: 999; }
Related
I don't know if is possible through CSS only to have one absolute footer under a relative element - being the relative one different in height due to the nature of it: either change of content or responsiveness. My HTML (using Angular 5):
<main>
<app-navbar></app-navbar>
<div class="content-container" [#fadeAnimation]="routeTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<app-footer></app-footer>
</main>
The reason why I want to have that is because the relative element contains the view of the user and I'm using angular animations which happen to "require" the elements that get displayed being absolute positioned in order to get the desired visualisation.
The problem with that is that for large elements I am having issues because the footer which is also absolute, does overlap the actual content if that makes sense.
I want to have a "sticky footer" at the bottom of the page so that it has absolute configuration etc (app-footer will render footer):
footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
My CSS:
main{
padding-top: 10px;
padding-bottom: 100px;
}
.content-container{
position: relative;
}
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
That was working fine till I added the relative to the .content-container to have the absolute position to the inner element.
A possible workaround I came across was to give a fixed height to the .content-container class and do the different resolutions so I can push down the footer. However I don't think that's possibly the best approach. I'm using Angular 4 if that's of any help. I also had a look at How to position element below relative positioned element without overlapping? but again, the suggested solution was to do with hardcoding the height.
UPDATE 1: I have updated the question with more detailed info. Hope it is now clear.
UPDATE 2: Plunker: https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview
Parent:
position: relative;
Child:
position: absolute;
z-index: 2;
top: 100%;
If I understood your problem, you need to set a position: relative and a z-index to your .content-container.
Keep in mind that the z-index and the absolute positioning refers to the next relative parent. This is the body by default, but it could be a div with a position: relative in-between.
.content-container{
position: relative;
z-index: 2;
background-color: rgba(180,100,50,.7);
padding: 85px 20px;
}
footer{
position: absolute;
bottom: 0;
z-index: 1;
background-color: pink;
padding: 20px;
}
<main>
<div class="content-container">
content
</div>
<footer>footer</footer>
</main>
I would suggest to use position:fixed for your footer.
For example:
footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
"fixed" means: relative to the view-port (and not relative to the nearest element with a position)
If I understand you, use a z-index
footer {z-index:0;}
.content-container {z-index:1;}
Currently your looks like this:
content-container is a div. It has explicitly set relative position to the document, since there is no node above with position: relative
after content-container there is a footer with position: absolute. Since there is no node with relative position above, it is absolute to the document
Based on what you write, footer overlaps content. And this is true. Because content-container and footer are positioned to the document, so are on the same level. That means they are rendered based on the document order:
Content container is rendered
Footer is rendered
Since that said, because footer is rendered last, it will overlap content container content.
To fix it you need to make sure footer will be rendered before content, or make sure whatever order they are rendered, footer will be rendered above.
To change rendering order you can just reposition container-content in the HTML code and place it after footer div.
But this is a fragile and troublesome solution.
There is fortunately a solution to this problem. You can explicitly indicate on what layer of rendering element should be. To do this you need to use z-index CSS property.
footer {
z-index: 1;
}
It tells browser that footer shoud be rendered above, way above other content elements.
Default value of z-index is auto. It translates to a value of 0. So if we set z-index to 1, node will be rendered above other elements on equal level without z-index being set.
As mentioned in the title, here are the requirements:
a footer that must always be at the bottom of the viewport (no pushdown)
css only
height based on the content of the footer (variable)
somehow prevent overlap of the main content element - when scrolled down
no tables
header
content
footer
if you remove any of the requirements, I know how to do it, but not with all requirement intact.
does anyone know a solution?
To put the footer on the bottom you can use a variation of the following:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.
I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.
This should work as you want! :) It will always be at the bottom of the page.
This will always be at the bottom of the viewport, NO MATTER WHAT! :D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.