The issue I am facing right now is that, when I have a navbar with position:sticky and I have a div with position:relative and in that another element with position:absolute then, when scrolling down, the relative div puts itself above the navbar.
I saw another thread that told the op to just use position:fixed but I really want to use sticky because the navbar is below the header and even though I could solve that by using javascript and fixed I'd rather not cause that made the navbar glitch etc. when scrolling to certain points.
Is it possible to have relative elements below sticky ones or is that just simply impossible?
While not scrolling:
While scrolling:
What I'm trying to accomplish:
Try adding z-index: 1 to the navbar and to the slideshow add margin: 40px;
Related
I'm trying to make a layout where the header gets scrolled out but the nav and footer are kept. Here's the link to it:
https://play.tailwindcss.com/LiIq5be2Wz?size=360x640
Here's the same code written in jsfiddle: https://jsfiddle.net/cdxqsfu4/
I already have it working but the framework I'll be using this on needs to have an app div. After adding it (or uncommenting it, in this case), only the top:0 part seems to be sticky, not the left:0. Is there a way to fix this?
EDIT: Here are the specifications I need:
The scrollbar should span the entire view, including the header and footer.
The header needs to be hidden when scrolled down.
The nav should be sticky to the top-most and left-most side of the screen.
The nav should span the entire width of the screen.
The footer should be sticky to the bottom-most and left-most side of the screen.
The footer should span the entire width of the screen.
The header needs to be outside of the app div.
The easiest solution would be to change the order of your markup. You should nest your header with the other divs and set one of them to overflow-auto. Doesn't matter which one. Using two overflow-auto's was the only way to get it to work with your previous structure, which loses the header scrolling.
See it working on Tailwind Play.
so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?
and i using margo template from graygrids
it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.
To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
Hope it helps!
The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.
Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.
This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.
Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.
Note: use whateverElement.style.zIndex = 0 instead of whateverElement.style.z-index = 0 as javascript handles - as subtraction operator.
I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.
On _layout.cshtml (inside the body tag):
<body>
<!--... OTHER Layout/header code...-->
#RenderSection("modals", required: false)
</body>
and in your view:
#section modals{
#Html.Partial("_MyModal")
}
Something similar would work in other languages and most importantly doesn't require modifying the CSS.
You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like
For example z-index: 3;
To be able to do this you have to set a position to your popup.
For example position: absolute;
After setting the position you can also adjust the position even more with putting this code in to your CSS
top: 500px; left:500px;
This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.
If you cannot understand what z-index is. I will provide a picture for you.
z-index axis example
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
I am using Foundation for the first time. I've found it's "Magellan" menu thingy, which makes the navigation sticky after scrolling down.
This feature works for me without problems, but i need to have the menu positioned on the bottom of the window right after header, which has 100% height. I managed to do that with margin-top and relative position, but both of them "broke" the sticky menu function.
When I used the margin-top method, the menu was sticky, but had the margin on itself, so it basically dissapeared on the top of the window.
I have a picture explaining what i need to make. The left side is what i have now and the right side is what I need to make.
So basically,i need to pull the menu up to appear on the bottom of the window, but work with the "Magellan sticky feature". Can anyone help me with this?
try to add this CSS code
.magellan-container{
top:auto !important;
bottom:0;
}
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).