How do I leave div overlapped to another div?
up vote
3
down vote
favorite
How do I leave the div #inner-block in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>javascript html css
edited Nov 7 at 13:43
j08691
164k20188212
asked Nov 7 at 9:16
Mano World
175
add a comment |
up vote
3
down vote
favorite
How do I leave the div #inner-block in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>javascript html css
edited Nov 7 at 13:43
j08691
164k20188212
asked Nov 7 at 9:16
Mano World
175
I don't understand your question. What do you meanin the foreground? Small block to be on top of the bigger one?
– Adi
Nov 7 at 9:18
I don't think that is possible in the current setup, because thez-indexof the parent of#inner-blockis lower than#block-2. Can the elements be moved?
– Swellar
Nov 7 at 9:20
A simple solution would e just to move the inner block to be the child of the block-2.
– Adi
Nov 7 at 9:22
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
How do I leave the div #inner-block in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>javascript html css
edited Nov 7 at 13:43
j08691
164k20188212
asked Nov 7 at 9:16
Mano World
175
How do I leave the div #inner-block in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>javascript html css
javascript html css
edited Nov 7 at 13:43
j08691
164k20188212
asked Nov 7 at 9:16
Mano World
175
edited Nov 7 at 13:43
j08691
164k20188212
asked Nov 7 at 9:16
Mano World
175
edited Nov 7 at 13:43
j08691
164k20188212
edited Nov 7 at 13:43
j08691
164k20188212
edited Nov 7 at 13:43
j08691
164k20188212
164k20188212
asked Nov 7 at 9:16
Mano World
175
asked Nov 7 at 9:16
Mano World
175
asked Nov 7 at 9:16
Mano World
175
175
I don't understand your question. What do you meanin the foreground? Small block to be on top of the bigger one?
– Adi
Nov 7 at 9:18
I don't think that is possible in the current setup, because thez-indexof the parent of#inner-blockis lower than#block-2. Can the elements be moved?
– Swellar
Nov 7 at 9:20
A simple solution would e just to move the inner block to be the child of the block-2.
– Adi
Nov 7 at 9:22
add a comment |
I don't understand your question. What do you meanin the foreground? Small block to be on top of the bigger one?
– Adi
Nov 7 at 9:18
I don't think that is possible in the current setup, because thez-indexof the parent of#inner-blockis lower than#block-2. Can the elements be moved?
– Swellar
Nov 7 at 9:20
A simple solution would e just to move the inner block to be the child of the block-2.
– Adi
Nov 7 at 9:22
I don't understand your question. What do you mean
in the foreground? Small block to be on top of the bigger one?– Adi
Nov 7 at 9:18
I don't understand your question. What do you mean
in the foreground? Small block to be on top of the bigger one?– Adi
Nov 7 at 9:18
I don't think that is possible in the current setup, because the
z-index of the parent of #inner-block is lower than #block-2. Can the elements be moved?– Swellar
Nov 7 at 9:20
I don't think that is possible in the current setup, because the
z-index of the parent of #inner-block is lower than #block-2. Can the elements be moved?– Swellar
Nov 7 at 9:20
A simple solution would e just to move the inner block to be the child of the block-2.
– Adi
Nov 7 at 9:22
A simple solution would e just to move the inner block to be the child of the block-2.
– Adi
Nov 7 at 9:22
add a comment |
2 Answers
2
active
oldest
votes
up vote
3
down vote
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>Hope this helps!
answered Nov 7 at 9:22
Dacre Denny
7,9154629
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
add a comment |
up vote
0
down vote
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>answered Nov 7 at 19:21
Temani Afif
59.5k93472
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>Hope this helps!
answered Nov 7 at 9:22
Dacre Denny
7,9154629
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
add a comment |
up vote
3
down vote
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>Hope this helps!
answered Nov 7 at 9:22
Dacre Denny
7,9154629
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
add a comment |
up vote
3
down vote
up vote
3
down vote
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>Hope this helps!
answered Nov 7 at 9:22
Dacre Denny
7,9154629
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>Hope this helps!
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>answered Nov 7 at 9:22
Dacre Denny
7,9154629
answered Nov 7 at 9:22
Dacre Denny
7,9154629
answered Nov 7 at 9:22
Dacre Denny
7,9154629
answered Nov 7 at 9:22
Dacre Denny
7,9154629
7,9154629
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
add a comment |
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
there is more simple : stackoverflow.com/a/53196366/8620333
– Temani Afif
Nov 7 at 19:22
add a comment |
up vote
0
down vote
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>answered Nov 7 at 19:21
Temani Afif
59.5k93472
add a comment |
up vote
0
down vote
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>answered Nov 7 at 19:21
Temani Afif
59.5k93472
add a comment |
up vote
0
down vote
up vote
0
down vote
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>answered Nov 7 at 19:21
Temani Afif
59.5k93472
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>answered Nov 7 at 19:21
Temani Afif
59.5k93472
answered Nov 7 at 19:21
Temani Afif
59.5k93472
answered Nov 7 at 19:21
Temani Afif
59.5k93472
answered Nov 7 at 19:21
Temani Afif
59.5k93472
59.5k93472
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53186468%2fhow-do-i-leave-div-overlapped-to-another-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't understand your question. What do you mean
in the foreground? Small block to be on top of the bigger one?– Adi
Nov 7 at 9:18
I don't think that is possible in the current setup, because the
z-indexof the parent of#inner-blockis lower than#block-2. Can the elements be moved?– Swellar
Nov 7 at 9:20
A simple solution would e just to move the inner block to be the child of the block-2.
– Adi
Nov 7 at 9:22