I'm trying to achieve that the erf_fromto would have a higher z-index than left_side, cause left_side do have a border, while i want the erf_fromto to be over the border.
this is how it looks like currently, while I want the erf_fromto to be over the line.
<body class="parent" ng-app="myApp">
<div class="left_side child"></div>
<div class="right_side">
<div class="erf_block" style="position:relative;">
<div class="erf_fromto">2011 - 2012</div>
</div>
</div>
</body>
css:
.left_side {
width:35%;
float:left;
border-right: 3px solid #F6F6F6;
}
.parent {
overflow: hidden;
position: relative;
}
.child {
height: 100%;
position: absolute;
}
.erf_fromto {
position: absolute;
left: -122px;
border: 2px solid #F6F6F6;
padding: 5px;
font-weight: bold;
box-shadow: 0px 0px 2px #F6F6F6;
font-size: 15px;
z-index: 99;
overflow: hidden;
}
codepen: http://codepen.io/anon/pen/XjzwdN
z-index applies to an element and it's children. Since .erf_fromto is nested inside .erf_block, which is inside .right_side you'll want to ensure that it's .right_side that has the higher z-index than .left_side!
From MDN:
The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
If you also put a position: relative; and z-index:0; to the .left_side child it will work
Maria,
If you add a background to left_side and erf_fromto you will see they are on the correct position.
I think you just need add background property on your erf_fromto class:
.erf_fromto {
...
background: white;
...
}
I hope it helps...
Good Luck!
Related
I'm filling a parent div with dynamically generated child divs. I'd like for the child divs to be bound by the parent (so they can't expand the parent's shape horizontally as they fill with content). At the same time, I'd like for the child div borders to sit on top of the parent div borders, as well as each others. I threw together a diagram to better explain:
What is the best way to accomplish this via CSS? I've looked around, and I can't seem to find a solution that both stacks the borders, but also keeps the child divs restricted by the parent div (on the x axis).
Overlapping borders are always a little tricky. In your case, I wouldn't recommend working with absolute positions and z-indexes – this will only make things more complicated and you won't be able to rely on the native behaviour of block elements anymore.
Let's say your HTML looks like this:
<div class="parent">
<div class="child yellow"></div>
<div class="child blue"></div>
<div class="child red"></div>
</div>
You can achieve the illusion of overlapping children by only applying a top border to the :first-child. Even if you add more divs dynamically to the top, the first one will always be the one that appears to be "on top":
.child {
border-style: solid;
border-width: 0 2px 2px 2px;
background: white;
}
.child:first-child {
border-top-width: 2px;
}
.yellow {
border-color: yellow;
}
.blue {
border-color: blue;
}
.red {
border-color: red;
}
The parent needs a little hack, because if you added a regular border around it, it would be displayed around the children.
.parent {
width: 500px; /* or any other width */
height: 100vh; /* or any other fixed height */
overflow-y: auto; /* make scrollable */
box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
}
The inset box-shadow creates the illusion of solid border on the inside of the parent. To make sure it's not visible underneath the children borders (box-shadows tend to be slightly blurrier than borders), you need to make sure the children have a background colour.
Edit: Here's a demo.
You can influence the stack order in css with z-index but you need to use a position:absolute or position:fixed on these elements.
.div1 {
width: 200px;
height: 100px
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.div2 {
width: 200px;
height: 100px
position: absolute;
top: 190px;
left: 0;
z-index: 2
}
That css should display the .div2 10px overlapping the .div1
If the height is dynamic you can either add it by JS or add on div as child in the next.
Note that each "position" attribute relates to the recent parent position relative or absolute!
If I understand you right, you could place the border of the parent using :after and position absolute, with z-index:-1:
.parent { position: relative; }
.parent:after {
content: '';
position: absolute;
z-index: -1;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border: 1px solid black;
}
and for the children, you could remove the top border if not the :
first:
.child:not(:first-child) {
border-top: 0;
}
you can also try this one. Define two different classes. "Border" class for border width and style. And a color class. Like this:
<style>
.border {
border: 5px solid;
}
.green {
border-color: green;
border-top-width: 0px;
}
.yellow {
border-color: yellow;
}
/*I do not use a border-top-width to remowe top because this is the first div.*/
.red {
border-color: red;
border-top-width: 0px;
}
</style>
<div class="container">
<div class="border yellow">yellow</div>
<div class="border green">green</div>
<div class="border red">black</div>
</div>
My HTML:
<div class="outer">
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
</div>
My CSS:
.outer {
background: red;
padding: 6px 20px;
z-index: 10;
overflow: hidden;
}
.inner {
background: green;
z-index: 11;
float: left;
margin-left: 12px;
}
.innerest {
background: blue;
width: 30px;
height: 20px;
z-index: 9;
position: absolute;
}
Here's a fiddle: http://jsfiddle.net/jsnlry/ycJdy/
I want the blue boxes to be behind the red one. It seems, that z-index is ignored in this case. But why?
Any idea?
In this example z-index only works on the position:absolute element. Try putting a negative value like -9 and it should work.
Do you mean like this:
http://jsfiddle.net/audetwebdesign/WJzRY/
.innerest {
z-index: -1;
}
Why This Works...
By default, z-index is auto which computes to 0, all elements have the same stacking level.
In my fiddle, I set up a sequence of styles to show what is happening.
You start off with a parent div with two floated children which are out of flow, and the parent height collapses to 12px high because of the padding (Ex 1).
When you declare overflow: hidden, you start a new block formatting context and the floated child elements are retained in the context of the parent, which is why the red background fully covers the child elements (Ex 2).
Finally, you can add absolute positioning to the .innerest elements, and this takes them out of the flow and they project out of the .outer ancestor element. Note that the floated elements affect the computed height of the containing block, unlike absolutely positioned elements. On the right .innerest element, you add z-index: -1 which places this element below all the other elements in the stacking order (computed to 0), so you get the desired effect.
Reference
http://www.w3.org/TR/CSS2/visuren.html#layers
Please add z-index: -1 to innerest class. it will be work.
.innerest {
background: blue;
width: 30px;
height: 20px;
z-index: -1;
position: absolute;
}
Try adding a negative z-index (-1) to your .innerest class.
Now used to this code define your .outer class position relative and remove overflow hidden
.outer {
background: red;
padding: 6px 20px;
position:relative; //add this line
}
.outer:after{
content:"";
clear:both;
overflow:hidden;
display:table;
}
.innerest {
z-index: -1; // add this line
position: absolute;
}
Demo
I opened the console (chrome\firefox) and ran the following lines:
$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");
The #popupContent should be above all but it's affected by the #popupFrame opacity.
The content is not contained in #popupFrame which makes this very weird.
The goal is to create a firefox-like alert box.
The second div is position: static (the default) so the z-index does not apply to it.
You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.
Old question but this answer might help someone.
If you are trying to display the contents of the container outside of the boundaries of the container, make sure that it doesn't have overflow:hidden, otherwise anything outside of it will be cut off.
Opacity changes the context of your z-index, as does the static positioning. Either add opacity to the element that doesn't have it or remove it from the element that does. You'll also have to either make both elements static positioned or specify relative or absolute position. Here's some background on contexts: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
z-index only applies to elements that have been given an explicit position. Add position:relative to #popupContent and you should be good to go.
I faced this issue a lot when using position: absolute;, I faced this issue by using position: relative in the child element. don't need to change position: absolute to relative, just need to add in the child element look into the beneath two examples:
let toggle = document.getElementById('toggle')
toggle.addEventListener("click", () => {
toggle.classList.toggle('change');
})
.container {
width: 60px;
height: 22px;
background: #333;
border-radius: 20px;
position: relative;
cursor: pointer;
}
.change .slide {
transform: translateX(33px);
}
.slide {
transition: 0.5s;
width: 20px;
height: 20px;
background: #fff;
border-radius: 20px;
margin: 2px 2px;
z-index: 100;
}
.dot {
width: 10px;
height: 16px;
background: red;
position: absolute;
top: 4px;
right: 5px;
z-index: 1;
}
<div class="container" id="toggle">
<div class="slide"></div>
<div class="dot"></div>
</div>
This's how it can be fixed using position relative:
let toggle = document.getElementById('toggle')
toggle.addEventListener("click", () => {
toggle.classList.toggle('change');
})
.container {
width: 60px;
height: 22px;
background: #333;
border-radius: 20px;
position: relative;
cursor: pointer;
}
.change .slide {
transform: translateX(33px);
}
.slide {
transition: 0.5s;
width: 20px;
height: 20px;
background: #fff;
border-radius: 20px;
margin: 2px 2px;
z-index: 100;
// Just add position relative;
position: relative;
}
.dot {
width: 10px;
height: 16px;
background: red;
position: absolute;
top: 4px;
right: 5px;
z-index: 1;
}
<div class="container" id="toggle">
<div class="slide"></div>
<div class="dot"></div>
</div>
Sandbox here
If you're a big 'ol dumdum like me (but know your positioning rules are 100% correct) trying to get something like this:
to look like this:
Your solution may be as simple as ensuring your background is not transparent for the element you want in front of/behind the other element.
I had the the same problem, and i tried to solve it by appending the element with absolute position in a div with a sticky position, my problem was with speeddial (reactjs + material), so i dont know if it will work with all cases.
It may be too late, but it can be preferred as an alternative method. The order of layering for displaying elements in the absolute position depends on the order in which the elements are inserted into the parent element. In other words, instead of using z-index, it is possible to send it to the back by adding it with $(parent).prepend(me), and to bring it to the front by adding it with $(parent).append(me).
function BringToFront(){
$("#parent").append($("#me"));
}
function SendToBack(){
$("#parent").prepend($("#me"));
}
#mySister{
position:absolute;
left:25px;
top:25px;
width:100px;
height:100px;
background-color: red;
}
#me{
position:absolute;
left:50px;
top:50px;
width:100px;
height:100px;
background-color: yellow;
}
#myBrother{
position:absolute;
left:75px;
top:75px;
width:100px;
height:100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="mySister"> </div>
<div id="me">Hello! this is me!</div>
<div id="myBrother"> </div>
</div>
<button type="button" onclick="BringToFront()">Bring to front</button>
<button type="button" onclick="SendToBack()">Send to back</button>
Check this code :
HTML :
<div style="position: absolute; visibility: visible; width: 172px;">
<img class="inf-image" align="right" src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">
<div class="inf-content">
Hello
</div>
</div>
CSS :
.inf-image
{
position: relative;
cursor: pointer;
margin: 3px 8px 0px 0px;
width:20px;
}
.inf-content {
background-color: #FF0000;
padding: 10px;
width: 150px;
height:50px;
}
looks like the div (which is relative) is under the image (which look absolute). Why? It should push the div over its height.
Floating elements (like an <img align="right">) offset only the content of block elements, but not their backgrounds, so the red background of the div is seen under the image.
Its all about the CSS stacking context. If you give an element another position than static it will be moved to its own stacking context. From a logical point of view the .inf-image { position: relative; } is no longer a child of the parent DIV or a sibling to .inf-content. What you have now is a DIV with another DIV (the red one) inside. The image itself "hovers" in its own context right below the document root (HTML) and is just positioned relative to that element, which preceded it in the source.
Which is shown above which element can be determined by a combination of position and z-index.
https://developer.mozilla.org/en/Understanding_CSS_z-index
http://reference.sitepoint.com/css/stacking
According to your css and html your div is positioned absolute while your image is positioned relative. This is your problem.
<div style="position: relative; visibility: visible; width: 172px;">
<img class="inf-image"src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">
<div class="inf-content">
Hello
</div>
</div>
.inf-image
{
position: absolute;
cursor: pointer;
margin: 3px 8px 0px 0px;
width:20px;
right:0;
}
.inf-content {
background-color: #FF0000;
padding: 10px;
width: 150px;
height:50px;
}
I keep getting weird results under Opera 10.60 trying to absolutely position block element inside inline-block element.
Sample code:
<html><head><style type="text/css">
div.container {
position: relative;
display: inline-block;
padding: 5px 100px;
border: 1px solid red;
}
div.block {
display: block;
position: absolute;
top: 0px;
right: 0px;
border: 2px solid brown;
}
</style></head><body>
<div class="container">
<div class="block">(>O.o)></div>
Quick brown block jumps over relative div.
</div>
</body></html>
Opera positions .block relative to the last inline element ( in this example) inside the same parent (.container), instead of positioning it relative to the parent.
Am I missing something, or is it just a bug, and I should find the other way around?
wrap your content in a div or something else, then it works.
http://jsbin.com/isuke3/edit
Change
position: relative;
to
position: absolute;
and it will align itself correctly in the browsers. :)