I've got a "Dialog" widget that pops up with a z-index of 100. When I create another popup (a floating div), it appears underneath the dialog widget, because I haven't explicitly set the z-index on the new popup.
The structure ends up looking something like
<div id="dialogbox" style="z-index: 100">
<div>
<div id="widgetThatCausesThePopup" />
</div>
</div>
<div id="popupHiddenBehindTheDialog" />
I'm using GWT to generate this HTML. There can be arbitrary levels of nesting between dialogbox and widgetThatCausesThePopup, and the actual z-index may be arbitrary as well.
How can I ensure that the new div will be shown in front of the dialogbox?
If your new dialog windows are inserted in the DOM after the previous ones:
You can set the z-index: 100 on all dialog windows. When elements with the same z-index are found, order in the DOM determines which is on top.
The natural CSS solution is to:
Make sure, that "dialogbox" gets a stacking context. This can be done by
setting z-index to something else than auto,
and additionally position to either relative, absolute or fixed.
Then add your popup as a child to "dialogbox". If it isn't yet, you can always move it in the DOM.
In that case, your popup doesn't need a z-index at all. This completely avoids the "z-index hell".
Example:
<!doctype html>
<html>
<head>
<style type="text/css">
#dialogbox {
width: 400px; height: 300px;
top: 0; left: 0;
background-color: red;
}
#popup {
width: 500px; height: 200px;
top: 0; left: 0;
background-color: green;
}
</style>
</head>
<body>
<div id="dialogbox" style="z-index: 100; position: absolute;">
<div>
<div id="widgetThatCausesThePopup" >
<button>Show popup</button>
</div>
</div>
<div id="popup" style="position: absolute;">
<!-- Empty divs cause really weird problems.
Always make sure, that your divs aren't empty! -->
</div>
</div>
</body>
</html>
The stacking context even allows you to use z-indexes relative to the context, if you need them (note, that the child order doesn't matter, and the z-indexes don't have to be larger than 100):
<div id="dialogbox" style="z-index: 100; position: absolute;">
<div id="popup" style="position: absolute; z-index: 2;">
<!-- Empty divs cause really weird problems.
Always make sure, that your divs aren't empty! -->
</div>
<div>
<div id="widgetThatCausesThePopup" style="position: absolute; z-index: 1;">
<button>Show popup</button>
</div>
</div>
</div>
Get the computed z-index of the parent (see In GWT how to know all the styles applied to a given element (by id or class name)) and increment it for each child.
Related
Consider the following code:
<html>
<head></head>
<body>
<div id="A">
<div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
</div>
</body>
</html>
A turns out to have a height of 0, regardless of the size of B and its contents. I want A to have its height set appropriately according to what's inside B.
Is this possible to achieve with CSS ?
So far, I haven't found any way to do it, but I'm pretty sure CSS should be capable of handling this, it looks like an extremely trivial to do.
I know there are many posts about achieving clearfix, but they appear to be outdated. It's 2016 now, maybe there are new alternatives available.
Important stuff: This is what I want to achieve, I didn't write that little layout and those style properties by chance. Please refrain from suggesting alternatives where the layout is different form the one I presented.
Since you want A's height to match the content in B, you can do it by adding display: list-item; to A. display: list-item; generates block box for content.
#A {
background-color: yellow;
position: relative;
display: list-item;
}
<div id="A">
<div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
</div>
I want to set the <div id="bar">...</div> into the background.
First, here is my page: tekkkz.com
<div id="bar">
<span id="views">50</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" id="dislike"></a>
</div>
This block (on the top right with the like/dislike buttons) should be in the background, so that it wont take any width of my content box.
How to do this?
For better understanding: what i want to reach is similar to set a image anchor to page in libreoffice.
You should use position: absolute on your <div id="bar"> and position: relative on it's parent. Then use right: 0 if you want your element to be at the right corner of the content block.
#bar {
position: absolute;
right: 0;
}
.content {
position: relative;
}
Since already in your stylesheet style.css
#bar{float:right;}
So you could just add in your pre block
<pre style="clear:both">
I tried it. It worked like charm.
Hope it help
I have a design that requires an absolute positioned object on the top of the page. (menu inside of a circle)
Then about 5 row later (using foundation) I have a second absolute positioned element. But its position is based on the previous element because once you apply position: absolute to one element, you’ll usually find yourself applying it to everything else. So even if the rows are positioned relative by default, it doesn't reset the absolute position, so the element is floating to the beginning of the page.
I can position it but if I add an element I have to touch up the CSS so this is not good.
So how do you reset absolute position, I tried to have elements before my second element static and the other absolute but it does not work.
The first element is based on this Gist, then later the code is:
.or {
position: absolute;
background-image: url(../assets/img/OR.svg);
top: 50%;
left: 50%;
margin: -42px;
width: 84px;
height: 84px;
background-size: 84px 84px;
z-index: 50;
}
That's it for the HTML
<div class="row" data-equalizer>
<div class="small-6 columns text-center">
<div class="panel " data-equalizer-watch>
this is the content
</div>
</div>
<div class="or" > OR</div>
<div class="small-6 columns text-center">
<div class="panel" data-equalizer-watch>
this is the content
</div>
</div>
</div>
This is the Or part that need to be centered no matter the content on the side here it is regular but not on all the page
The solution was simple (like always) is is to put relative to the parent div
Is there any way to clear absolutely positioned elements with CSS? I'm creating a page where I need each part of the site (section element) to be absolutely positioned, and I want to apply a footer with content below those elements.Tried to relatively position the header and footer to see if a total height would be taken into account but the footer still gets "trapped" underneath the section elements. Any ideas?
<header style="position: relative;"></header>
<div id="content" style="position: relative;">
<section id="a" style="position: absolute;"></section>
<section id="b" style="position: absolute;"></section>
<section id="c" style="position: absolute;"></section>
<section id="d" style="position: absolute;"></section>
<section id="e" style="position: absolute;"></section>
</div>
<footer style="position: relative;"></footer>
Absolutely-positioned elements are no longer part of the layout - parent items have no idea how big absolutely-positioned child elements are. You need to set the height of "content" yourself to ensure it does not overlap the footer.
Don't use absolutely-positioned elements for layouts since that elements are removed from normal flow and no longer affect elements around them. And they're not affected by other elements.
Use absolute-positioning to move elements within a container when conditions allow.
For floated elements I suggest you to use a specific clearing technique called clearfix. I use it religiously.
http://nicolasgallagher.com/micro-clearfix-hack/
http://jsfiddle.net/necolas/K538S/
Had same question, made all absolute positioned, but let the first one be relative, as for responsive layout where height does change, it did help to keep track of the elements height changes, notice in this case all elements have same height:
.gallery3D-item {
position: absolute;
top: 0;
left: 0;
}
.gallery3D-item:first-of-type {
position: relative;
display: inline-block;
}
I discovered a easy solution to this, it might not cover all possible problems but at least it solved my problem.
HTML:
<p>Content before</p>
<div class="offset-wrapper">
<div class="regular">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
<div class="special">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
</div>
<p>Content after</p>
CSS:
.offset-wrapper {
background: green;
position: relative;
width: 100px;
}
.offset-wrapper .regular {
visibility: hidden;
}
.offset-wrapper .special {
bottom: -15px;
left: -15px;
position: absolute;
}
I have a container div. Inside that div are three graphs aligned at 700px intervals (the width of the container). The idea is that the other 2 graphs will be hidden off screen which I can then, with jQuery, slide across when a user interacts with various controls on the web page.
A simplified version of my code is like so:
Style
#graphcontainer {
height: 260px;
overflow: hidden;
width: 700px;
}
.graph {
position: absolute;
}
HTML
<div id="graphcontainer">
<div class="graph" style="left: 0px;"></div>
<div class="graph" style="left: 700px;"></div>
<div class="graph" style="left: 1400px;"></div>
</div>
For some reason the second and third graphs, which are positioned off to the right, are still visible! How do I ensure they are not visible?
First you have to set, position:relative for the parent. Then, you have to set the height of the parent.
Demo: http://jsfiddle.net/Scfdk/
You need to add position: relative; and set a height to the element you have overflow set to hidden on.
if you want to hide a div, have you considered "display: none"? For example,
<div class="graph" style="display: none"/>