I have a problem with position of a block (div). I am newbie in CSS, please help me.
I have this code: http://jsfiddle.net/9rEmt/ (please take a look there) to view online in IE.
If I put absoulte at positioning, the issue appears: (please choose Compatibility mode if you have newer version of IE )
instead of (without compatibility mode, just simply in IE9) :
Where is the problem ? How to solve this issue ?
Thank you very much
In IE to position an element relative to another element the parent element needs to e positioned itself.
Try to add this to your stylesheet:
#item {
position: relative;
top: 0px;
left: 0px;
}
Also, move the items div into the item div so that items is able to be positioned relative to item.
http://jsfiddle.net/U92jm/
Related
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
I have gone at a lot of informative sites in order to find answer but no luck so far. Thus now asking here.
CSS Class
.toppy {
:-webkit-full-screen {position: relative; top: -1310;}
:-moz-full-screen {position: relative; top: -1310;}
:-ms-fullscreen {position: relative; top: -1310;}
fullscreen {position: relative; top: -1310;}
}
JS Input
window.onscroll = function() {mss()};
function mss() {
var posi = document.body.scrollTop;
document.getElementById("toppy").style.top = -posi;
}
Depending on a position on a web page, this should give the value (posi). Negatived as CSS works on that way, and trying to update CSS with style(top) value (posi). However, no updating.
JS into which CSS influences
function FullScreen() { .... code .... }
CSS affects to this. If CSS has defined without class .toppy, function FullScreen works nicely opening full screen with the CSS's pre-set values (-1310) at the position downwards from the top.
But why is CSS's style property top not being updated by JS input function and therefore changing the position of the FullScreen to open at? My goal is to obtain the full screen to be opened at its current position on page. Some browsers do this automatically, some do not. Thus needing coding.
Or does one have to define a variable in css (e.g. var(--posi)) and proceed on this way but I do not have a real clue how to do that?
Many thanks for replies!
Update:
Thanks for the points. Valid ones. However, as the problem remains, I think the issue here is how to link a css to certain js being the case paricularry with this fullscreen. If I had two identical js fullscreen (expect function name), how would I define above kind of css to one js and another css to another js? As for me, it seems that css for fullscreen is (defined as above) not accepting any id or class tags, or I do not know how to link id to js? Syntaxing? Regards!
OK, so, here's my setup:
I have a jQuery UI Layout setup (one west, one south, and a center panel)
In the west panel, there is a jqTree (with the jqTreeContextMenu plugin, showing a simple dropdown menu, on right click)
The issue:
When the user right clicks on any of the tree items, the context menu does appear, although it appears sort of "clipped", while it should appear ON TOP of everything, no matter what.
I've played a bit with the z-indexs but - as usual, since it's not actually my... thing - I cannot get it to work.
So, any ideas?
Live demo: http://testbox.drkameleon.com/peppermint/uilayout.html
JS Fiddle: http://jsfiddle.net/2ke92qcg/
(the layout here, for some reason, appears rather weird, but it shouldn't matter. Closing and re-opening the west panel fixes the issue)
OK...
So, after a lot of trial-and-error, here it is:
.ui-layout-west{
z-index: 5000 !important;
overflow: visible !important;
}
And that was all! :-)
as mentioned before
z-index only works within a particular context i.e. relative, fixed or absolute position.
z-index for a relative div has nothing to do with the z-index of an absolutely or fixed div.
Here is your FIDDLE
ul#filetreeMenu {
z-index: 999 !important;
position: fixed;
}
div#wrapper {
position: initial !important;
}
I have a div showing "Please wait". The markup for the div is
<div id="pleaseWait" class="divOuterPleaseWait" style="left:expression((documentElement.clientWidth-this.offsetWidth)/2);top:expression(documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2 ));">Please Wait...</div>
This is working fine with IE7. In IE7 the div is show at the center of the page. But excepted behariour is not optained in other browsers (ie. IE8,IE9,FireFox,Google Chrome etc). What should i give to get this working in all browsers? Also can I move the inline style to the my CSS?
A good way to center a div is to use fixed positioning, top and left set to 50% and left and top margin to the negative of half of the width/height:
http://jsfiddle.net/fLa4S/
See this SO answer, or this jsfiddle (press the 'confirm' button). The css you showed in your question is browser specific (especially: IE). In javascript you can center an element by determining the 'viewport' dimensions (height/width of the available screen) and position your element relative to those dimension. The links here demonstrate a way to do that.
It doesn't work in "other browsers" because you are using expressions in your CSS which are 1) incredibly bad for a variety of reasons (slow, deprecated, non-standard) and 2) unnecessary.
You can use pure CSS positioning (percentages and negative margins) or a little JavaScript (jQuery makes this very easy) to accomplish the same thing in all browsers.
Another approach:
<div style="text-align:center;width=200px;margin-left:auto;margin-right:auto">Please wait...</div>
CSS expressions are only working in IE. However, it´s generally not a good idea to use them because they are not W3C conform and in addition they can be very slow when you make heavy use of them.
The CSS attribute position: fixed could help you here:
#pleaseWait {
width: 400px;
height: 200px;
position: fixed; /* IE8+ */
left: 50%;
top: 50%;
margin-left: -200px; /* half of width*/
margin-top: -100px; /* half of height*/
}
If you have to still support <=IE7 you have to use JavaScript (but not within the CSS definition!)
Using auto as margins and defining a width and hight should be enough
<div style="width:200px;height:50px;margin:auto;text-align:center">Please wait ...</div>
If you only want to center verticaly, use margin: 0 auto;
PS: if you want to be more XHTML-correct, put your CSS in a CSS-file and use a class or a id to define the css-styling
I've answered this before: How to set the div in center of the page
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">.