I'm using z-index on my page ( -link no longer needed- ), and it doesn't work properly: it doesn't place certain divs above all others...
You can see it yourself, by clicking one of the items in the left, or right bar.
Then, the mask will fade in, but show the message box, beneath it.
I've tried a lot, but I just can't get the message box to show above all others...
What can I do to fix this? [note: 2nd question below!]
If you don't want to check the page, the message box is located in some other divs:
<div>
<div>
<div>message box</div>
</div>
</div>
The CSS positioning is like this:
.window {
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
}
I use position:fixed, because position:absolute is not absolute here, the div is not aligned to the body, but something else somehow.
Is there a way to reset the positioning and absolute position it again?
For as long as I can remember, z-index issues often come from the fact than the parents of the z-indexed elements are not positioned. Sibling parents should be positioned.
If you're using jquery check the top Z Index Plug In, you can apply it when the object has a mouse over event like:
<div id="modal" onmouseover="$(this).topZIndex();"></div>
Then change the position to absolute with jquery also or viceversa:
$(document).ready(function(){ $('#modal').css('position','absolute'); });
if you remove z-index from #leftbar it fixes your problem. The position should not matter, as long as you have one.
Related
HTML:
<div id="autocomplete" hidden></div>
<input type = "button" id = "search" value = "Search">
The autocomplete div holds various input tags generated by jQuery. When the input tags are created, they shift the button down the screen in order to fit the autocomplete content. What I want to do is to have the autocomplete div overlay on top of the the button rather than shifting the button down.
I have tried using z-index, but it seems to only work if autocomplete is placed after the button in HTML, the using negative margin to shift autocomplete back up. I don't like this solution since it messes up when viewed from other screen sizes.
Is there another way?
I think you have to use absolute positioning to keep the button over the inserting elements.
You can do something like this:
$('#autocomplete').append($('<div>').text('WOW1'))
$('#autocomplete').append($('<div>').text('WOW2'))
$('#autocomplete').append($('<div>').text('WOW3'))
$('#autocomplete').append($('<div>').text('WOW4'))
#container {
position: relative;
}
#search {
position: absolute;
top: 0;
}
#autocomplete {
padding-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="autocomplete" ></div>
<input type = "button" id = "search" value = "Search">
</div>
EDIT:
Here is a link to see how CSS position works:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Also I recommend you to check this stack overflow answer about relative vs absolute positioning it has a very natural response (Position Relative vs Absolute?)
This tells the browser that whatever is going to be positioned should
be removed from the normal flow of the document and will be placed in
an exact location on the page. It won't affect how the elements before
it or after it in the HTML are positioned on the Web page however it
will be subject to it's parents' positioning unless you override it.
This is the general method to have the items inside the autocomplete div not affect the flow of the other elements on the page (your button in this case).
#autocomplete {
position: relative;
}
#autocomplete > * {
position: absolute;
}
A few comments to improve this code:
Don't use IDs (#) on your css. Better stick to class names.
Don't use the wildcard (*) - preferably add the items that will exist inside the autocomplete, which are not shown on the question. And better, wrap them all in another element so you don't have to absolute position all of them individually
I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.
I have a table (bootstrap themed, generated from Django admin).
In one of the columns I have a div, which contains three elements, and anchor and two spans - each span to display bootstrap glyphicon.
<div class="my-fixed-width under-review data-sent-false">
C4U0UACXX-8 6nb
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>
I would like to have the icons moved to the right (ideally lined up between table elements in the same column).
My problem is that when I add float:right to the spans, it moves them right, but also down and expands the div height.
After the float:right is added :
How can I keep the icons at the same vertical position as before, while moving the elements right? (I have tried position:absolute, and clear:both).
This question has been here a while, but I found a good answer so I want to share.
According to this answer I found elsewhere on StackOverflow, the elements that you want to have floated right need to be given first in your html structure.
<div class="my-fixed-width under-review data-sent-false">
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
C4U0UACXX-8 6nb
</div>
This bug was giving me all sorts of trouble on my own website, but once I found this out I realized that it's actually quite simple to understand the fix. When you put a float:right element after everything else, then it will float to the right just like you asked it to. But if there's not enough room to the right (or if some quirk of browser rendering makes it think there's not enough room) then that element gets pushed down as well, so the browser is satisfied that it will fit. But if you put the float:right element first, then it goes right where it's supposed to before the browser lays out any other elements. Then the ones without float:right get put in according to their usual layout, including adjusting auto-widths or auto-margins to accommodate floated elements.
It didn't happen when I was testing this, but this configuration might still cause both of them to be on top of each other even if they're not initially pushed down from their original position, but if that happens try adding the display:inline-block like this:
span.glyphicon{
float:right;
display:inline-block;
}
See this JSFiddle on an example of it working with the spans placed before the anchor.
Maybe you should post all the code, because float right should not do that. See that codepen : http://codepen.io/mbrillaud/pen/myKjPO
.my-fixed-width{
width:200px;
background-color: orange;
}
.icon{
float: right;
}
If you want to use position: absolute, do not forget to set the parent to position: relative, like this: http://codepen.io/mbrillaud/pen/jEKpqx
.my-fixed-width{
position: relative;
width:200px;
background-color: orange;
}
.icon{
position: absolute;
right: 0;
top: 0;
}
if it goes down when you don't want it to then simply add a
"Margin-top: -(###)px;"
to the CSS
Everywhere people asks for how to align an element inside a DIV they are told that the container must have a relative position.
In my case, I have a floating dialog, with absolute position. How can I make a button element always stick to the bottom of this dialog?
<div class="dialog">
<div class="dialog-content">
</div>
<button>Close</button>
</div>
Try to use absolute positioning with bottom: 0px for your button. It will position relative to the parent of button which is .dialog.
Something like this: http://jsfiddle.net/0rohooj9/
You would need to give the dialog absolute dimensions, and then set the button's position to absolute, and bottom: 0;
Here's a Fiddle with your code:
http://jsfiddle.net/erlingormar/d8sa43s8/
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
.content-wrapper is relatively positioned and contains all the page content (not just the popup).
.popup is absolutely positioned.
.close is also absolutely positioned.
I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn't able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.
Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?
Yep, use z-index: http://jsfiddle.net/tGd4Q/
HTML:
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
CSS:
.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }
This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:
$('.popup .close').hide();
Stacking indices are most of the time relative to siblings, so you cannot put a child behind it's parent using z-index.
Here is some more information about that.
This is the stacking order:
The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0
Nick McCormack uses z-index: -1 in his answer. This is indeed one exception to what your feelings give in. Beware that z-index: -1 moves an element behind many of your elements to the background.
Browser differences
Beside that, Internet Explorer does not support negative stacking indices and is very strict with element (child/parent) positions. Every element level has it's own stacking context, so have to 'communicate' via the parent element. See this explanation.
According to Smashing Magazine, the select element, which is a windowed control, has naturally a higher stacking index.
According to the Shadowbox troubleElement option, I presume that object, embed and canvas have the same issues.
If you want to hide .close, why don't you really hide it instead of moving it behind .popup?
$('.close').hide();
No, you will not be able to put it behind its parent. However you could change its display mode to none, so it isn't seen at all. Then when you need to see the div, change it to show.
Simple jQuery:
$('.close').hide();
$('.close').show();
There are other ways as well, such as adding an attribute of style with display:none or display: inline-block as a setting.
Update: According to comments in other answers, there IS a way to do it with z-index. Still thinking the hide/show is the way to go though. Very clear what you are doing on your UI.