code: https://jsfiddle.net/Nemoko/m8vLprb6/11/
problem:
I try to put the footer to the bottom of the page. because when I have to scroll down(when I have a lot of content in the page) the footer is in the way: but when I dont have to scroll. the footer is perfectly in place
how do I fix this?
what I tried:
adding position:relative; in the body
this however hides the footer somehow at the top of the page and margin-top does not work setting position:relative; in the footer shows it again, however than it somehow sticks to the top of the page
adding display:flex; flex-direction:column; min-height:100vh; in the body
this makes the footer appear again
I see your problem - the solution is this change both the body and footer position to relative - also change flex-direction:row not sure why you had it as column, experimenting i assume, i also added a flexbox property to space around your content. justify-content:space-around;
what i recommend further is reading this pages when you get a change, will help you with positioning and use of div/ boxes a bit better.
but in simple terms position:absolute doesn't move.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm also pretty new - so i understand where you at bro.
.content {
left: 96px;
top:200px;
width: 1728px;
position: relative;
background-color: #0fa1cb;
opacity: 0.9;
color: #FFFFFF;
}
.footer{
left: 96px;
bottom: 0;
width: 1728px;
position: relative;
display: flex;
background: linear-gradient(#0fa1cb,#000046);
opacity: 0.9;
flex-direction: row;
justify-content:space-around;
It looks like your biggest issue is that you are using absolute positioning on your content and footer sections. Setting position:absolute on an element removes it from the document flow. You would have a much easier time removing the absolute positioning from the content section and then setting position:relative on the Body element. I have always found it to be a best practice to use absolute positioning sparingly, and definitely not for large content sections that may contain an arbitrary amount of content.
Related
I have a problem, my English is not good, but I try to describe my problem completely!
There is currently a window. The screen to be implemented is that the footer should be fixed at the bottom of the container, and should not move down as the content of the white block increases. Then, when the content of the white block is too much, the entire window will not change. Large, and the white block content can be scrolled to view other options.
My example
What I could understand, you need to fix footer.You just need to uncomment your commented code of footer and change position:fixed Or position: sticky; from position: absolute
i.e Your footer code of CSS would be;
footer{
position: fixed;
//position: sticky;
width: 100%;
bottom:0px;
right:0px;
background-color: #f77331;
display: flex;
justify-content:space-around;
padding:10px;
z-index:9000;
.btn{
padding:10px;
border-radius:20px;
}
}
Then if your content hides due to fixed position of footer you can use margin for that content.Hope this would solve your problem.
I have googled a lot and am here to seek some expert's suggestion on this issue am facing.
The header has a css below -
.head {
position: fixed;
z-index: 1;
}
and the content on the page DIV has a form with a tooltip in some of it's fields with below css on the tooltip -
<div class="sample">
<input type="text">
<div class="tooltip" style="top: -44px; left: 1228px;
display: block;">
<div class="downarrow"></div>
<div class="inside">Sample tooltip text goes here!!!</div>
</div>
</div>
and the css -
.tooltip{
position: absolute;
z-index: 1070;
}
Now, from my knowledge the stacking goes like fixed, absolute and then relative(please correct me if wrong). which is why my tooltip goes under the header div. But, is there any way to make the tooltip come on top?
Appreciate your responses. I have pretty much hit a wall in finding a solution without making layout changes and hence the post.
Update: CodePen: https://codepen.io/anon/pen/VVJpzw
Remove z-index: 0 from your .main css class, instead of removing position relative. If you just remove position relative or z-index, you are dismissing the stacking context (reference) in this main section, but there are still more use cases for having position: relative than a z-index (absolute positioned elements contained inside). You do not want to create a stacking context on your main section in cases where the Header has something like a mega menu/drop down navigation, otherwise those menus will display underneath the main section.
If you need any sort of structure in the main section, create child items of .main so that the stacking context starts there instead of on the same level as the header.
Just remove position: relative property of .main class, because of relative parent it's not going out.
.main {
padding-top: 100px;
flex: 1 0 auto;
display: block;
[position: relative;] -------> remove this line.
display: flex;
flex-direction: column;
width: 100%;
height: 50vh;
box-sizing: border-box;
z-index:0;
}
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.
While I nailed down a padding of 50px below my body previously, I am still having problems with a bunch of white space sitting below my footer on my pages. Do I merely need to make my content longer to fill the vertical space? I'm using bootstrap for the first time to create my new site and I am left with this annoying dilemma. here's a link to an offending page:
http://preview.yourgreatwebsite.com/ecom.php
I bet someone will look at this and show me something I'm not seeing in Firebug (or beyond Firebug). I've been looking at it for too long!
More than likely if you are using the sticky footer template from the bootstrap page you are dealing with the margin below text that is pushing the text inside the footer div further up and therefore pushing its parent element up too. I had the same issue. An easy way to fix this would be to add the following code inside one of your stylesheets.
.footer p { /* Selects text inside a <p> tag that is inside a .footer <div> */
margin-bottom: 0; /* removes default <p> tag margin from the bottom */
}
Add some bottom padding (exactly the height of your footer) to the footer's parent element which is body in your case:
body{
....
padding-bottom:70px;// You can adjust it
}
and make your footer's position absolute
.footer-main {
background: #81ccfb;
padding: 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Simply remove the default Bootstrap padding from the bottom of the page:
body
{
padding-bottom:0;
}
I am using Angular with Bootstrap 5 and experienced the problem with . I added a style in the body as follows and problem went away
<body style="height: auto;">
<app-root></app-root>
</body>
You could use flexbox to fix the layout.
Css
body{
display:flex;
flex-direction: column;
}
.navbar {
order:1;
flex-shrink:1;
}
.headerstrip {
order:2;
flex-shrink:1;
}
.container {
order:3;
flex-grow: 5;
}
.footer-main {
order: 4;
flex-shrink: 1;
}
If in chrome dev tools you see that the body of the footer and the footer have different dimensions. You could add negative margin bottom to the body. It is a quick fix.
<body class="mb-n4">
</body>
This worked for me, perhaps it can help someone.
Well, the same happened to me. Turned out I was dropping the elements into the header element, instead of dropping them into the body element. If anyone has the same problem, then try dropping them into the body tag within the overview panel. A lot more accurate.
Simply add this to your footer class (in your case: .footer-main):
position: absolute;
bottom: 0;
Quick explanation: it will set your footer as a floating block, which position doesn't depend on other elements, and then it will stick the footer to the bottom of the page.
I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.