I am trying to create a webpage that has a header that is always on top of everything else. If I add a bootstrap modal to popup, it has a grey area that covers the header.
I've tried setting the z-index for both my red background header element, and my modal-popup element, but it just results in the modal grey box being overtop my red navbar which I am trying to avoid.
https://jsfiddle.net/martinradio/u03f1zyo/21/
When a modal pop up, it's created a div element on the top levels of the DOM, I went through a similar problem and setting the z-index like that solved it:
.modal-backdrop.show { z-index: 1000 !important; }
Your Header has default position which is
position: static;
Change it to:
CSS
header{
position: relative;
z-index: 1041;
}
This will fix your issue. If you want to make your header sticky in future. position: fixed will also work. You should avoid touching Modal box z-index and instead change z-index of components on case by case basis.
Related
http://codepen.io/justinturner/pen/VjyWJE
The linked codepen has a fixed header div.
I'm using javascript to add a menu div on the left when the hamburger icon is clicked. This is also a fixed div.
When the menu div is added, the header div seems to revert to relative positioning, and jumps to the top of the main content div. Scroll down just a hair and then click the hamburger, you'll see what I mean.
What issue am I running into here? When a user clicks the hamburger, I want the header to remain fixed and translate directly to the right like the rest of the content.
<em>too much code to paste</em>
According to the spec and other similar questions here on SO, fixed elements and translates don't "play" well together.
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
Following the first suggestions from above (using left instead of translateX), edit your code to the following and the issue should no longer persist.
.o-wrapper.has-push-left {
left: 300px;
}
.o-wrapper {
position: relative;
transition: left 0.3s;
}
#header-wrapper {
transition: left 0.3s;
}
.has-push-left #header-wrapper {
left: 300px;
}
DEMO
I created a website with enough text, so that you are able to scroll (http://jsfiddle.net/o0emtyug/1/). On the right side I added some buttons for special functions on my website, which are positioned fixed and have a spacing using CSS top:XXpx;. Furthermore I placed the buttons within my menu bar div container nav-primary.
Using my JQuery script sticky-nav.js the menu bar is always visible on my page, even if I scroll down the page. So if I scroll down the page my menu bar stays on top of the page.
What I want to achieve:
I want my buttons to keep the same distance height from the menu bar all over the time. For this I will need to remove the CSS code top:XXpx;. If I do this, my buttons disappear. I tried changing top to margin-top but this did not solve my problem.
Anyone able to tell me what I need to do in order to arrange the buttons exactly below the menu bar, with the same distant height when scrolling?
I've added a test button with Absolute positioning in the nav bar, so it doesen't seem to be in the container, but inherits its position:
#test {
position: absolute;
right: 0px;
top: 100px;
}
Here the Fiddle
Remember that Absolute positioning is relative to the Body or the first container that have a specific position. In this case, top:100px is relative to .nav-primary, that has position: relative.
I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/
Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18
I am having an issue on my site where I have a bootstrap (version 2.3.2) navbar fixed to the top of the page and then later in the body I have a bootstrap collapse object with a large amount of content in <pre><code> tags. The collapse opens and closes as expected; however, when I scroll down the page, the content in the <pre><code> tags overlaps the navbar at the top of the page. I have attempted to add z-index's to both the navbar and the collapse content; however, it doesn't seem to be working.
Below are the jsfiddle links. The offending overlapping content is at the end of the page. Thanks!
My code: http://jsfiddle.net/K3JAe/3/
Full Screen Result: http://jsfiddle.net/K3JAe/3/embedded/result/
The .collapse class has position: relative, making it a positioned element, and your navbar has position: fixed from the Affix plugin, making it also positioned. The accordion comes later in the DOM, which makes it stack on the navbar.
#Adrift's fix is the way to go: the affixed element at the top of the page needs a z-index to stack on any later positioned elements. I would go higher than 2 though for your future z-indexing uses:
/* Stack .affix on top of positioned elements later in the DOM */
.affix {
position: fixed;
z-index: 100;
}
Adding a z-index value to the .affix class above 1 seems to do the trick:
.affix {
position: fixed;
z-index: 2;
}
http://jsfiddle.net/K3JAe/5/
I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.