Make element appear on top, but underneath clickable [duplicate] - html

This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 6 years ago.
I'm trying to make a notification system where a small box appears in the top right corner of the screen.
However, I want the part of the screen that is under the notification to be clickable. As it is now, when the notification is there, you can't interact with what's under it. How can I make the area under it clickable? I've tried messing around with the z-index, position, and transform properties, but they still make the notification appear on top of the other content.

Use pointer-events: none on the popup box to allow clicks and cursor interactions to pass through it.
Note that this is not supported by IE10 or under, but that makes up a very small percentage of users.
http://caniuse.com/pointer-events/embed/

Related

An alternative to hidden so that the site doesnt act like its still there? [duplicate]

This question already has answers here:
How to hide elements without having them take space on the page?
(17 answers)
What is the difference between visibility:hidden and display:none?
(21 answers)
Closed 7 years ago.
Okay so I am trying to build a header that I like. I have been using bootstraps header and using my own CSS file to alter parts.
I have increased the size of the header, the colour etc. I have an icon on the left, nav buttons in the middle and social icons on the right. The social icons on the right keep getting in the way when the site is resized so I used the hidden tag to remove them at a certain media size, but even though you can't see them you the site still acts like they are there. Is there a way to solve this?
Here's the thing.
display: none removes the element from the document flow.
visibility: hidden does not remove the element from the document flow.
So, whenever you're trying to hide an element without some weird document flow happening, use display: none;
Try using display:none instead of visibility:hidden.
Instead of visibility:hidden use display:none in the css. On display:none, the site will not act like the tag is there.

Prevent overlay image from making underlying image unclickable [duplicate]

This question already has answers here:
Ignore mouse interaction on overlay image
(5 answers)
Closed 7 years ago.
I have an HTML image with a "play button" image over it using standard position relative/absolute techniques for overlaying.
The underlying image has a hyperlink and the overlaying image does not. This however makes it impossible to click the hyperlink when the mouse is over the overlay image.
Is there any way to prevent the overlay image from "obstructing" the hyperlink in the underlying image, except from hyperlinking the overlay image as well?
Make use of the z-index.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
For example, set the image to z-index: -1 or the link to z-index: 1000

Website that has fixed length but more underneath [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make a <DIV> occupy all VISIBLE height screen, with content below it
This probably has a strange title as I was not sure how to call this, however I am wanting to make a website similar to fiftythree.com where you see the homepage but then if you scroll down the navigation buttons appear. No matter the screen resolution if you open the website it will always be hidden until you scroll down. What is this called and how could I go about replicating it, thanks!
Have you tried making a div for your navigation and a div for your main content.
This website does not have a fixed navigation bar.
You might want to consider using a fixed position in your css if you want the navigation bar to be fixed. Also you might want a minimum width for your body tag (also css). This avoids your navigation elements stacking up on a small window.

How to prevent page content from shift when scroll appears? [duplicate]

This question already has answers here:
Prevent a centered layout from shifting its position when scrollbar appears
(7 answers)
Closed 5 years ago.
I am currently working on project about car travelling http://wayfi.ru and
I have encountered a problem recently - page content shifts to the left after vertical scroll appears. How to prevent this?
As I know, one could always display disabled scroll and make it enable if there is necessary.
Do you know better technique to accomplish this?
I'm afraid I do not know of any other way to do this apart from always showing the scrollbar, active or not.
The simplest way I think is:
html {
overflow-y: scroll;
}
This way, even on pages without scrolling there is space reserved for the scrollbar and the content won't jump around between pages.

How Can I Make HTML Elements Unhighlightable? [duplicate]

This question already has answers here:
Is there a way to make text unselectable on an HTML page? [duplicate]
(16 answers)
How to disable text selection highlighting
(45 answers)
Closed 6 years ago.
I'm trying to make it so certain text and images on an HTML page cannot be highlighted with the cursor, so it appears as if they're a part of the background.
Is there a way to make text unselectable on an HTML page?
First of all if I would like to know the intention behind this. If this is to prevent the user from copying your text and images then I think its impossible for you to make this happen. Once it is rendered to the client browser area then the whole thing comes under the control of the user.
For images not to be highlighted make them as background.
You can also place a transparent div on top of the area where you don't want the selection to occur. Position the div so that they will appear on top of the element with a higher stacking order. For a greater stacking order you can use the z-index property.