Is there a property that allows one element in a div to stack over another element in the same div?
I know with two divs you can use position: relative; & position: absolute; to get this working, but with two elements in the same div I'm not sure what to do.
If you would like to "stack" elements on top of each other, yes you can use the position property.
You would use z-index to alter stack order; the element with the higher z-index would be in front of an element with the lower z-index.
You can see this here, in this fiddle.
.el1 {
height: 100px;
width: 100px;
background: yellow;
position: relative;
z-index: 1;
}
.el2, .el3 {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
background: blue;
z-index: 2;
}
.el3 {
background: green;
z-index: 3;
top: 5px;
left: 5px;
}
<div class="el1">
<div class="el2">el2</div>
<div class="el3">el3</div>
</div>
Related
I want to do an effect similar to a Penrose stair where you have element-1 on top of element-2 but behind element-3 witch is behind of element-2 a bit complicated from what I can tell.
I have this code
<body>
<div class="parent">
<div id="s1" class="square"><div></div></div>
<div id="s2" class="square"><div></div></div>
</div>
</body>
.parent {
width: 300px;
height: 300px;
border-radius: 25px;
background: orange;
position: relative;
}
.square{
display: inline-block;
position: absolute;
z-index: 10;
}
#s1{
--Color: teal;
left: calc(100px);
top: calc(100px);
transform: rotate(45deg);
}
#s2{
--Color: cornflowerblue;
right: calc(100px);
bottom: calc(100px);
transform: rotate(-135deg);
}
.square>div{
width: 50px;
height: 50px;
border-radius: 10px;
background: var(--Color);
opacity: 1;
}
.square>div:before{
content: " ";
display: inline-block;
position: relative;
width: 100px;
height: 8px;
background: var(--Color);
background: #000;
z-index: -1;
top: 5px;
left: 5px;
}
The code has two elements both with a before reaching the other element, this is a simplified version of my problem, but I want to have the before behind both elements.
There are some other restrictions I need to consider, this should be responsive so I can't get away with a set width so easely. Also, I'm trying to keep it as vanilla as possible.
Edit 1:
I'm want to acheave this
effect
You can make each box elements full width in two elements. One side having a higher z-index than the other side and the thin lines. This will give the illusion that you hove one box instead of pseudo elements to make up the entirety of your box element. Adjust the radius of each combining element so it is only on the two corners it needs to be. Adjust the positioning of each absolute element to line up with its corresponding colored half.
-- EDIT: OP asked to have the two black lines below the two box elements --
In this case you can use the #s2 pseudo element copying the properties to recreate the same box, make it position: absolute then move it left using positioning essentially covering up the two black lines.
Because the second element is parsed after the first in the DOM and
they are sort of tied at the hip; one set being a box and its child
element the black line, we use the second parent elements pseudo
element #s2:after to cover the first as it will naturally sit on top of
both elements in z-indices.
-- end of edit --
NOTE: I also created divs out of your span elements as a div is a block level element and should not be nested inside SPAN.
My example is just down and dirty but it should illustrate how this illusion can be achieved.
.parent {
width: 300px;
height: 300px;
border-radius: 25px;
background: orange;
position: relative;
}
.square{
display: inline-block;
position: absolute;
z-index: 10;
}
#s1{
--Color: teal;
left: calc(100px);
top: calc(100px);
transform: rotate(45deg);
position: relative;
z-index: 1;
}
#s2{
--Color: cornflowerblue;
right: calc(100px);
bottom: calc(100px);
transform: rotate(-135deg);
}
#s2:after{
content: "";
position: absolute;
background-color: teal;
border-radius: 10px;
top: 0;
left: 70px;
width: 100%;
height: 100%;
}
.square>div{
width: 50px;
height: 50px;
border-radius: 10px;
background: var(--Color);
opacity: 1;
}
.square>div:before{
content: " ";
display: inline-block;
position: relative;
width: 100px;
height: 8px;
background: #000;
z-index: -1;
top: 5px;
left: 5px;
}
<body>
<div class="parent">
<div id="s1" class="square"><div></div></div>
<div id="s2" class="square"><div></div></div>
</div>
</body>
I want a child of a div to be positioned to the left of its parent as if they were both sibling spans. That is, the child is actually completely outside of the parent.
The size of the child varies, but the parent has a fixed size.
I have tried using a combination of position: absolute with a negative margin, like so:
.parent {
display: block;
position: relative;
}
.child {
display: block;
position: absolute;
right: 0;
margin-right: -100%;
}
But that didn't work. I also tried many combinations of margins and positions, such as right: -100%, right: 0; margin-left: 100% and nothing works.
I tried using the same combination of right: 0 with a negative margin-right, instead using pixel values. While it does work, it's not ideal. I have multiple of those in my page (they are generated by code) and the size of the child always varies. Is there a CSS-only solution?
simply add left: 100% in your child element.
.parent {
position: relative;
background-color: teal;
width: 250px;
height: 250px;
}
.child {
background-color: blue;
position: absolute;
left: 100%;
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child"></div>
</div>
I have many div, which are in position:absolute.
I try to avoid their superimposition only with CSS rule. I don't want to change the top value.
.try {
/*some magic?*/
}
#pos1 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 30px;
}
#pos2 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 90px;
left: 30px;
}
#pos3 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 300px;
left: 30px;
}
#pos4 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 400px;
left: 30px;
}
#current {
position: absolute;
top: 5px;
left: 50px;
}
#expected {
position: absolute;
top: 200px;
left: 50px;
}
<h1 id="current">Current</h1>
<div id="pos1" class="try"></div>
<div id="pos2" class="try"></div>
<h1 id="expected">Expected</h1>
<div id="pos3"></div>
<div id="pos4"></div>
Here is also a jsfiddle :
ps: I supose this behavior it's stupid because I ask for position absolute.
Absolutely positioned elements are removed from the normal flow of the document. That means surrounding content ignore them and occupy their place:
9.6 Absolute positioning
In the absolute positioning model, a box [...] is removed from the
normal flow entirely (it has no impact on later siblings). [...] The
contents of an absolutely positioned element [...] may obscure the
contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
So either don't use absolutely positioning, or move your elements (e.g. with margins).
I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!
For instance, take the following HTML & CSS:
<div class="fixed"></div>
<div class="wrapper">
<div class="child"></div>
</div>
.fixed {
background: blue;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.wrapper, .child {
position: absolute;
height: 20px;
width: 20px;
padding: 20px;
}
.wrapper {
z-index: 1;
background: red;
}
.child {
position: absolute;
z-index: 3;
background: yellow;
}
Expected behaviour would be that .child displays above .fixed whilst .wrapper is invisible however on http://jsfiddle.net/STLMR/ .fixed shows above all (tested in Chrome + Firefox). Is there some trick to this, or is there some quirk of CSS I'm missing?
In CSS, z-index is not absolute, but relative to the parent container. With "absolute" I'm not referring to the position: absolute attribute, I state this because it might be confusing.
Related: https://stackoverflow.com/a/7490187/671092
You have to move the .child into a new container that has a higher z-index than .fixed.