Actually My problem is i want to rotate the image when a button click occurs(HTML img and HTML Button), i already done that with help of jQuery , but now after rotating the image the content is hiding behind that Rotated image when scrolling.i hope u understand my problem, please give me any suggestions,thanks in advance
You could try adding a z-index to the image or the content (A low or minus z-index on the image will put it behind, or a high z-index on the content will bring it to the front). Create a CSS class:
.BringToTheFront{ z-index: 1000 };
or
.SendToTheBack{ z-index: -1000 };
And then assign the class to the image / content. If this doesn't work, you may need to use jQuery to assign the CSS to the element after it has rotated.
$('#MyElement').css('z-index', 1000);
or
$('#MyElement').css('z-index', -1000);
If you are using z-index elsewhere on your page, you may find 1000 isn't enough.
Dan
Related
I have this div that starts off at a distance from the top:
The problem is that, when I start to scroll up, the rounded image is hidden:
I am very sorry that I could not reproduce the issue, as this is a custom CSS used on Notion -- meaning that I couldn't duplicate a website for testing purposes.
What I want is for the rounded image to appear on the top of the page, as opposed to being partially cut off as in the second image. The image should be perfectly round, even if being scrolled up.
In more simple terms, I want the rounded image to display even outside of the notion-app div, which is shown in the first image that starts off at an offset from the top.
Do anyone have a suggestion of removing the problem?
EDIT I already tried z-index, but that doesn't help.
Thanks in advance.
Give the #notion-app of overflow: visible;
#notion-app{
overflow: visible;
}
https://www.w3schools.com/css/css_overflow.asp
read sample docs on w3school for reference
I am trying to design the first Book Now button of this page (https://www.bridgecitychrysler.com/book-service/) to overlap onto the white section below the hero image. Even though I have set the z-index incredibly high, it is not showing up in front of the section below.
If someone is able to figure this out just in the inspect tool, that would be great!
Thanks,
Looks like your .hero-widget css has overflow: hidden; set, disabling that seems to have made it visible!
Try removing position:relative from your button class.
This makes the button reappear, and then remove transform: translateX(-50%) from the a tag in the cta-container for proper alignment.
Use pointer-events:none for these type of situation, when click events is not working for overlapped content, use pointer-events:none
Lets start with I'm using square space CSS code injector. I am trying to have some images placed behind the text links that read (menu, what we sellin', wholesale) With my background image it is hard to see the links. I would like to add small wooden boards as the image behind them. Appreciate any help .
My website: www.slurpnsnack.com My website
edit: I do not want to add a background image to the header itself. I am wondering if there is a way to attach the picture itself to behind the link, or just how to go about placing my own links there.
Your links are held in a div with class .header-nav-item
So CSS along these lines:
.header-nav-item {
color: white;
background-image: url(wood.jpg);
}
should be enough, though you may want to play around with background positioning and sizing depending on how consistent you want the look to be on the various sized items and what your image is actually like.
Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
Here is the site:
http://ivideez.com/
As you can see my dropdowns are being hidden behind the video; how do I get then to dropdown OVER the video.
What do I add to css? i've tried overflow, position, z-index, I'm stuck, any advice? I'd prefer if cross-broswer capable answer.
Use wmode property of embed to transparent as like bellow :-
wmode=transparent
I hope it will helps..!!
PS
For more details :- Refer to here
i had same problem once and i solved it by applying z-index to main container. try giving the z-index value to parent container that holds the dropdown menu instead of directly giving it to the .. Also give z-index to flash video whose value should be smaller..