I have a situation where in there are 2 children in a parent container. The first child occupies the entire content of the parent container.
The other child should be below the parent container. Currently it shows up on top of the parent. I am struggling to stack the 2nd child element behind the parent container.
Is it possible to do so. If so how do I approach the solution.
Note: I cannot get rid of the z-index of the parent container as it is the modal in this case
HTML
<div class="parent">
<h1>Parent</h1>
<code>position: absolute;<br/>
z-index: 1;</code>
<div class="outer-child">
<br/><br/><br/><br/><br/>
<h1>Outer Child</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div class="child">
<h1>Child</h1>
<code>position: absolute;<br/>
z-index: -1;</code>
</div>
</div>
CSS
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
.parent {
z-index: 1;
opacity: 1;
position: absolute;
top: 40px;
left: 100px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
height: 200px;
}
.child {
z-index: -1;
position: absolute;
top: 10px;
left: 260px;
width: 150px;
height: 110px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
.outer-child {
z-index: 1;
opacity: 0.8;
position: absolute;
top: 10px;
left: 10px;
width: 330px;
border: 1px dashed #900;
background-color: #ffc;
padding: 20px 10px 10px;
height: 200px;
}
JSFiddle
Set the parent element z-index to initial
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
.parent {
z-index: initial;
opacity: 1;
position: absolute;
top: 40px;
left: 100px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
height: 200px;
}
.child {
z-index: -1;
position: absolute;
top: 10px;
left: 260px;
width: 150px;
height: 110px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
https://jsfiddle.net/3269rjqh/1/
Once an element has a z-index, it creates new plane, so any child elements with a z-index are always going to be "above" it (in the z-plane). You can either remove the z-index from the parent, or restructure your HTML accordingly.
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
.parent {
z-index: 1;
opacity: 1;
position: absolute;
top: 40px;
left: 100px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
height: 200px;
}
.child {
z-index: -1;
position: absolute;
top: 10px;
left: 260px;
width: 150px;
height: 110px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
<div class="parent">
<h1>Parent</h1>
<code>position: absolute;<br/>
z-index: 1;</code>
</div>
<div class="child">
<h1>Child</h1>
<code>position: absolute;<br/>
z-index: -1;</code>
</div>
Related
How would I go about making this in CSS3/HTML5?
The Red background is the background of the div. The inner white is another div that will contain some text.
Since you already have 2 containers, you can use two pairs of pseudo elements for the corners, like this:
.outer {
width: 120px;
background: #a08;
position: relative;
padding: 30px;
}
.inner {
height: 118px;
background: #fff;
border: 1px dashed #a08;
flex: 1;
}
.outer::before, .outer::after, .inner::before, .inner::after {
content: '';
width: 20px;
height: 20px;
background: #a08;
background-clip: padding-box;
border: 1px dashed #a08;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.outer::before {
top: 20px;
left: 20px;
}
.outer::after {
top: 20px;
right: 20px;
}
.inner::before {
bottom: 20px;
left: 20px;
}
.inner::after {
bottom: 20px;
right: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
I have two parent elements (a black and red divs). Each of them contain a child element. The black one contains a gray div. The red one contains a pink div.
Following constraints:
I can not change the relationship between child to it's own parent element, i.e. I can not move a child element outside of it's own parent element.
The red div has to remain underneath the black div
Is it possible to move the pink div above the gray div?
.parent-black {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .9);
color: white
}
.child-gray {
width: 250px;
height: 90px;
background-color: gray;
position: absolute;
right: 137px;
top: 20px;
z-index: 0;
color: white;
}
.parent-red {
width: 100%;
height: 40px;
background-color: red;
position: absolute;
top: 40px;
z-index: -999;
}
.child-pink {
width: 95%;
height: 80px;
background-color: pink;
top: 30px;
left: 20px;
position: absolute;
z-index: 9999;
}
<div class="parent-red">
2
<div class="child-pink">2.1</div>
</div>
<div class="parent-black">
1
<div class="child-gray">1.1</div>
</div>
Using jQuery below
$(document).ready(function() {
$('.child-gray').insertBefore($('.child-pink'));
})
.parent-black {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .9);
color: white
}
.child-gray {
width: 250px;
height: 90px;
background-color: gray;
position: absolute;
right: 137px;
top: 20px;
z-index: 0;
color: white;
}
.parent-red {
width: 100%;
height: 40px;
background-color: red;
position: absolute;
top: 40px;
z-index: -999;
}
.child-pink {
width: 95%;
height: 80px;
background-color: pink;
top: 30px;
left: 20px;
position: absolute;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-red">
2
<div class="child-pink">2.1</div>
</div>
<div class="parent-black">
1
<div class="child-gray">1.1</div>
</div>
Honestly, I don't get the real problem here... I guess this follows your constraints:
.parent-black {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .9);
color: white;
position: relative;
}
.child-gray {
width: 250px;
height: 90px;
background-color: gray;
position: absolute;
right: 137px;
top: 20px;
z-index: 0;
color: white;
}
.parent-red {
width: 100%;
height: 40px;
background-color: red;
margin-top: -20px;
}
.child-pink {
width: 95%;
height: 80px;
background-color: pink;
top: 70px;
left: 20px;
position: absolute;
z-index: 9999;
}
<div class="parent-black">
1
<div class="child-gray">1.1</div>
</div>
<div class="parent-red">
2
<div class="child-pink">2.1</div>
</div>
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}