Develop Reference

Bring element on top of modal backdrop

I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips

Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt

Menu in Bootstrap 4 disappears when the mouse movement is slow

I'm running this fiddle and when the mouse pointer moves quickly from from START to the unfolded menu, everything works great. However, when the movement is slower, the menu closes because it feels like the mouse's left.
const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
menu.toggleClass("open");
});
Initially, I tried to make the list item control taller but realized quickly that the menu will open below it (plus this unfortunate vertical distance).
What can I do about it?
Apparently Bootstrap creators found this good for some reason (or didn't think about mouse movements but rather clicking). Am I setting up the hover event in an inappropriate way, perhaps?

for me is better this solution
here is the fiddle
.open>.dropdown-menu{
margin-top: initial;
}

This css fixed it for me (Bootstrap v4.3.1):
div.dropdown-menu {
margin-top: 0 !important;
}

Yes, it's caused with space between menu element and menu itself. When you are moving fast, it's ok, because cursor "jumps" directly to menu, but moving slowly, you will leave menu item area and menu disappear. One solution which comes to my mind is to move it 1px higher:
.open>.dropdown-menu {
top: calc(100% - 1px);
}
Working JSFiddle.

Animate div from middle of div to bottom right of screen into a fixed position

What I am trying to figure out is how to animate a div that will start out in the middle of a div that is in the middle of a page. The div originally should not have a position: absolute. Unless it is not possible, I would like it not to start with that because it seems very tough to have any data below it. It's not going to be that big of a box. I am guessing anywhere between the height of 100px and 600px, with a width between 400px and 800px.
I originally found this JsFiddle Example that does a great job and almost exactly what I need. But the div starts with an absolute position and it is already located at the bottom right of the page to be animated.
Once the div is at the bottom right of the page, it needs to be fixed there so that I can scroll up and down the page without it moving. At this point I am not worried about being able to push it back up to the spot in which it came.
A couple things I tried: Lining it up in the position I desired, and then on the click of a button, add a class with the attribute position: absolute and calling the animate function like this:
chatWindow.stop().animate({
bottom: 0
, right: 0
}, 2000);
But my guess is that it originally needs to the the position set as in top: 0; left: 0 and that's why it won't work.
I already have it working without any animation and would love to be able to figure out how to animate this thing. Without animation, it's as simple as toggling a class with it's normal positions attributes with one that has a position: fixed; bottom: 0; right: 0.
Here is a Codepen Example that I created to show really what I need other than right animation part not being there. Any help would be awesome as I've been toying with this for quite some time now.

If you want an animation from left to right, you will have to play with left and top values. But the negative point is that will cause a weird animation because you want to keep a relative position of the box in the beginning.
So when you will do the animation, it will start from the very top left on the window, which is not good.
Like this
To avoid that, you will have to use absolute position in the beginning state. You said in your question you doesn't want it but I think it is required to get the wanted visual effect.
See here the live example with good effect
However, to keep a pretty nice animation, but I know it is not what you want, you can play with right and bottom values. It will make the box appears from the right and bottom corners of the window.
Like this

One possibility, still using absolute positioning, based on what's going on in your codepen example, would be to fake the current positioning by adding the following CSS:
.container {
padding-top: 250px;
}
.center-window {
position: absolute;
right: 50%;
margin-right: -200px; /* i.e. half of its width */
bottom: 100%;
margin-bottom: -250px; /* i.e. its height */
}
Then you could animate the right, bottom, and margin properties accordingly. See https://codepen.io/anon/pen/RaOJYY (though it doesn't currently do anything with the padding). Of course, if your not sure of the dimensions of .center-window, perhaps this solution won't quite work.

Slider from the left side of screen to the right side of content

This is my first post so hello! :)
I have a problem with coding my site!
May I show it on this picture:
I want to make a slider (with captions for each slide) which is aligned to the right edge of content div.wrap. But left side of it must by to the left side of the screen. It must change to the screen resolution (always to the right edge of the content div.wrap Something like this
Right edge of div.wrap must be a limit.
I have no idea how to do this. The slider must be a background fader? Or img fader?
Please help me or show me how to do this on similar example.

Further to #Itay's answer, here is a jsfiddle which might help you with the CSS for this.
http://jsfiddle.net/mmWq6/4/
I've used the example of a slider that is 500px by 200px. This is what I guessed would be a miniature version of the webpage I expect you're creating, if you scale the 'Result' window narrower and then wider again you'll see that I think the design works how you want it to.
This demo basically demonstrates Itay's comments, which were to have a wrapper (#slider-wrapper) which had the CSS position: relative and a div within that with the CSS:
#slider-wrapper-inner {
position: absolute;
right: 0;
}
Then within that are .slides which are relatively positioned and .captions within them that are positioned absolutely, as above (but with an extra line: bottom: 0;), so that they sit in the bottom right.

Javascript Drop Down Menu over Image Rotator

Designer here, trying to code.
I am almost there! Trying to get a drop down menu from dynamic drive to work over an jQuery image rotator. Played with z-index. I can get the menu to work over the image rotation on all browsers except in IE compatibility mode, cannot click on the buttons in the rotator.
http://local495.bigrigmedia.com/
Any help would be greatly appreciated!

Always so much easier to get everything looking right in Photoshop eh? You can fix your overlap issue with 2 minor tweaks to the CSS:
styles.css
#top {
position: relative;
z-index: 2;
height: 155px;
}
ddsmoothmenu.css
.ddsmoothmenu{
position: relative;
z-index: 2;
/* remaining css */
}
homerotation.css
div#feature_list {
position: relative;
z-index: 1;
/* remaining css */
}
I also noticed you had a lot of z-index: -100 sprinkled around your CSS. Those are also going to cause you trouble. I would suggest taking them all out and just using the above 2 changes.
What the above 2 rules do is establish the stacking order for the menu and image rotator in a way that all browsers (including our friend IE) understands.
The trick with IE when using z-index is to make sure all the elements you're trying to overlap are in the same stacking context. IE creates a new stacking context whenever you use relative, absolute or fixed position on an element. In our case above, we're setting the stacking order on the top most elements in the stacking context (i.e. the document), therefore it will be respected.
Edit
Added a z-index to the #top container as this is actually the <div> that's at the same level in the document as <div id="feature_list">.