I've a div element <div class="getBack">Get back to portfolio!</div>
and some css
.getBack{
height: 70px;
width: 100%;
position: fixed;
z-index: 99;
}
And for some reason, this position fixed doesn't work and I don't know why.
It just scrolls up, out of sight
You might need to set an actual position like top: 0; right: 0;. Also, make sure the parent element you want .getBack to be fixed relative to has a position other than static.
Related
I have the below Ionic application example in Stackblitz. You'll see that there are a custom Angular component called <my-video></my-video>, an ion-list and a button. What I want is:
Put the ion-list on top of the video. This way, the ion-list overlaps the video.
Put the button under the video.
This is what I have now, you can see the code in the Stackblitz example (including the CSS code):
I think the problem can be that video-container hasn't the same height as its children my-video, but I don't know why.
I tried with different positioning configurations (position relative, absolute , static, etc.) with no effect.What would be the correct way to achieve this?
I believe the problem is that my-video is absolutely positioned, meaning it is taken out of the natural flow of positioning and positioning the button anywhere based on my-video very tricky, which is not what we want, so you need to make my-video's positioning relative, keep the options-list position absolute but also add top: 0 and left: 0, like so
.video-container {
position: relative;
my-video {
position: relative;
width: 100%;
background-color: red;
}
.options-list {
position: absolute;
top: 0;
left: 0;
}
}
.finish-button-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 32px;
position: relative;
}
now the button can go to the bottom of the screen because my-video is in the flow of positioning
Updated the stackblitz with the following css for your button :
position: absolute;
top: 40%;
left: 50%;
right: 50%;
You need to use position: absolute here in order to get your button's position relative to the .video-container div.
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.
I want to make this shopping cart's div follow the user's viewport (http://testshop.michaelkenji.com/), so I tried to simply injecting div { position:fixed} to it's stylesheet, it worked, but there are complications which I am here to ask.
Q: Given two fixed elements, and they collide, which one will be on top?
Q: How do I make an element be the absolute "top" (with only css)
When you want to overlap the element in top, you should use a higher z-index value for eg:
div{
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
div{/*this div will be on top layer of previous div*/
position: fixed;
top: 0;
width: 100%;
z-index: 2;/*because of higher z-index*/
}
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; }
I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.
It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.
In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.
You may be looking for position: fixed.
Works everywhere except IE6 and many mobile devices.
The easiest way is to use position: fixed:
.element {
position: fixed;
bottom: 0;
right: 0;
}
http://www.w3.org/TR/CSS21/visuren.html#choose-position
(note that position fixed is buggy / doesn't work on ios and android browsers)
Make sure your content is kept in a div, say divfix.
<div id="divfix">Your Code goes here</div>
CSS :
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
Hope ,It will help you..
position: sticky;
The sticky element sticks on top of the page (top: 0) when you reach its scroll position.
See example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
The tweak:
position:fixed;
works, but it breaks certain options....for example a scrollable menu that is tagged with a fixed position will not expand with the browser window anymore...wish there was another way to pin something on top/always visible
position: fixed;
Will make this happen.
It handles like position:absolute; with the exception that it will scroll with the window as the user scrolls down the content.
Try this one:
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
In order to keep floating text in the same location over an image when changing browser zoom, I used this CSS:
position: absolute;
margin-top: -18%
I think the % instead of fixed pixels is what does it. Cheers!
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 1000;
}
The z-index is added to overshadow any element with a greater property you might not know about.
You can do like this:
#mydiv {
position: fixed;
height: 30px;
top: 0;
left: 0;
width: 100%;
}
This will create a div, that will be fixed on top of your screen. - fixed
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
You can try this code:
<div style="top: 0; position: sticky;">your code</div>
or you can add class/id like this:
html:
<div class="FixedPosition">your code</div>
css:
.FixedPosition{
position: sticky;
top: 0;
}
you may change the "top" if you want it to not be on top of the screen and don't delete the top else it won't work.
I hope this help : )