I'm using react, and I have an icon which is an image, the issue is that the position of it is fixed, it's showing and working normally as I want except when scrolling to another component such as carousel or cards, you can see from the pics, how can I fix this?
This is how it's shown
This what happens when user scrolls to another component
use z-index
You should give the z-index of the icon div higher than the z-index of the carousel or card div
example
`.icon{z-index:99999,position:'fixed'}`
<div class='icon'>your icon<div>
Related
I'm trying to create an overlay that may contain its own scrollbar. The overlay should take up the full width and height of the screen, and scroll its own contents if they are longer than the page height.
My problem is I can't figure out how to stop the actual page from scrolling when the overlay scrolls. I want this to act like a Bootstrap modal.
Here is the fiddle with a code example: https://jsfiddle.net/r5jLcekb/
In the example, I'm using:
fixed bg-black bg-opacity-50 w-screen h-screen overflow-y-scroll
As you can see, the page scrolls it's contents, not just the overlay. I only want the contents within the overlay to scroll. Is this possible to do purely with tailwind?
I think you're looking for overscroll-auto -- see https://tailwindcss.com/docs/overscroll-behavior for more.
The way I approached this problem is by adding a class to the body whenever this overlay is rendered. Whenever your overlay element is mounted you need to execute a javascript code that does the following :
document.body.classList.add(`overflow-hidden`);
document.body.style.marginRight =
document.body.offsetWidth - widthBefore + "px";
The second assignment is optional and it's added to get rid of layout shift when scrollbar shows and hides
I had this same issue. My parent container was scrolling for the entire length of the site when the fullscreen overlay was active, but the content was not scrolling in the fullscreen overlay. I added overflow-y-scroll and overscroll-y-none to the fixed container and it worked nicely. Hope this saves someone some time :) Thanks Jas (comment above) for the point to overscroll.
See https://tailwindcss.com/docs/overflow
and https://tailwindcss.com/docs/overscroll-behavior
I have two components in a page, a position fixed element which covers the browser window which has a child image with transparent background, and a fullpage.js vertical slider powered by CSS transforms, with the following markup:
<body>
<div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
<div id="fullpage-container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
I'd like the fixed element to display over the first section so the image is visible, and then the second section to slide over the image so the image disappears under the section. With the above markup this isn't possible with any combination of z-indexes, and if I put the fixed element inside #fullpage-container the position fixed of .fixed-element is no longer respected due to the transform on the parent.
Is there anyway to achieve this effect that I've missed?
Doesn't sound like it is possible. Mainly because whenever you change the z-index (which will have to be on section leave or on section load by using the fullpage.js callbacks onLeave or onLoad) the image will suddenly appear or disappear:
When changing the z-index on onLeave, the image will disappear behind the 1st section while the section is moving to the destination.
When changing the z-index on afterLoad of the 2nd section, the image will be over the 2nd section for a small period of time before the 2nd section really stops moving. So you'll see how it suddenly disappears behind.
The only option I could see is:
You use the fullPage.js option scrollBar:true so you can get the current scroll position using the scroll event (or any library that do so).
Then whenever you detect the fixed image is going to hit the 2nd section, change the z-index just right before it does.
You will also be able to play with z-index even when placing the fixed element inside the wrapper. As fullPage won't be using css3 transformations anymore (although performance won't be that smooth)
On this page: http://diablogym.net/
When you use a mobile device like a tablet or cell phone the logo covers the menu icon button. I want that icon to appear on the right - logo on the left. I can't figure out how to do that. Can anyone supply the css to fix that?
thanks!
The styles on this site seem very messy...
In order to fix it I removed the float, position, width and height from '.nicdark_logo' (why is the height set to 10px?). I also took the position: absolute; off of '.nicdark_logo img'. This makes the logo appear above the menu.
Beyond these changes, I would suggest centering the logo and scaling it down a bit so your sticky header isn't taking up so much of the page.
I am trying the Move records Modal exactly on top of below Modal but I am not getting the styling that I need. Below is the image and I am applying styling on it.
Here is my image link
:https://drive.google.com/open?id=0BwgG2ftgvg_YUnZNRnpaWmFIZkNYbEg2WVZuLXBuZEtkNEo0
You have to set the greater z-index for container which should be in front than container on back.
I have a CSS menu here
http://www.salvationarmyqc.org/
When I hover the mouse over the menu, it shifts but only the first time a hover event occurs.
After that, it doesn't move.
I can't figure out why this is happening.
Are you able to post your css?
By the looks of it, you are setting a border width on hover which pushes the menu item down. You might try using absolute positioning, and adjusting the top height by -1 or a similar value.
for example your css might look something like.
#listContainer{position:relative;}
.listItem{position:absolute;top:0;}
.listItem:hover{top:-1;}
Im not sure why the entire navigation menu moves down in chrome without seeing your css.
your #navigation is jumping from a height of 34 to 36px. you could statically set it to 34pixels or put padding and margin to 0 for all of the li's.