Need help to display the inner most div over the parent without scroll.
I don't want any scroll on parent div when child div display:block.
and I cant remove .divrelative{position:relative;},
and i have fixed hight of parent.
.parent{background:#ccc; padding:10px; height:100px; overflow-y:auto;}
.divrelative{position:relative;}
.child{ background:#fff; width:80%; height:180px; border:1px solid #000; position:absolute; z-index:9999;}
<div class="parent">
<div class="divrelative">
<div class="child"></div>
</div>
</div>
You spoke about "over the parent" in this case, if you accept overlap, simply remove "overflow-y:auto" rule.
.parent {
background: #ccc;
padding: 10px;
height: 100px;
}
.divrelative {
position: relative;
}
.child {
background: #fff;
width: 80%;
height: 180px;
border: 1px solid #000;
position: absolute;
z-index: 9999;
}
<div class="parent">
<div class="divrelative">
<div class="child"></div>
</div>
</div>
change the position to absolute
.parent{background:#ccc; padding:10px; height:100px;}
.divrelative{position:relative;}
.child{ background:#fff; width:80%; height:180px; border:1px solid #000; position:absolute; z-index:9999;}
Related
This has me stumped. I applied a border-right, border-left, and border-bottom to a div which has another Green BG color div inside of it. I set the z-index: 1 and position: relative on the parent div with the borders.
However, as you can see in the photo, only the LEFT border gets the z-index applied to it, whereas the RIGHT border doesn't get the z-index and falls behind the green div.
This ONLY happens if I have a width set on the inner-div wider than the outer div, and it only seems to prevent the first border-right from coming above the bg, as a repeating element doesn't suffer from this issue.
This makes no sense, and it's consistent across Chrome, Firefox, and Edge.
Is this some weird quirk / bug with CSS that I just discovered? Or am I somehow completely messing this up?
.flex-div {
display: flex;
}
.outer-div {
position: relative;
border-right: 7px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 7px solid #cccccc;
z-index: 1;
max-width: 200px;
flex: 0 0 200px;
}
.mid-div {
width: 600px;
z-index: -1;
position: relative;
}
.inner-div {
background-color: #00b989;
width: 250px;
height: 50px;
display: inline-block;
z-index: -1;
position: relative;
}
<div class="flex-div">
<div class="outer-div"> outer
<div class="mid-div">
<div class="inner-div">inner</div>
<div class="inner-div">inner</div>
</div>
</div>
<div class="outer-div"> outer </div>
<div class="outer-div"> outer </div>
<div>
Could you help me diagnose the reason why this is happening, and any workaround to get the borders on both the left and right of the outer-div to overlay the -inner-div?
You cannot control the z-index in relation to its children because they are contained so (in a sense) inherit the z-index.
But you can make the children go behind their parent by setting their z-index to -1.
.outer-div {
position: relative;
flex: 0 0 200px;
border: 7px solid #cccccc;
max-width: 200px;
}
.inner-div {
background-color: #00b989;
width: 250px;
height: 50px;
position:relative;
z-index:-1;
}
<div class="outer-div"> outer
<div class="inner-div">inner</div>
</div>
or you could apply overflow:hidden on the parent so that the green bar is hidden when larger (if that suits your needs)
.outer-div {
flex: 0 0 200px;
border: 7px solid #cccccc;
max-width: 200px;
overflow:hidden;
}
.inner-div {
background-color: #00b989;
width: 250px;
height: 50px;
}
<div class="outer-div"> outer
<div class="inner-div">inner</div>
</div>
To fix your issue you need to apply z-index to child elements not to parent element (keep the parent with z-index auto)
All the border on the top:
.flex-div {
display: flex;
}
.outer-div {
border-right: 7px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 7px solid #cccccc;
max-width: 200px;
flex: 0 0 200px;
}
.mid-div {
width: 600px;
z-index: -1;
position: relative;
}
.inner-div {
background-color: #00b989;
width: 250px;
height: 50px;
display: inline-block;
z-index: -1;
position: relative;
}
<div class="flex-div">
<div class="outer-div"> outer
<div class="mid-div">
<div class="inner-div">inner</div>
<div class="inner-div">inner</div>
</div>
</div>
<div class="outer-div"> outer </div>
<div class="outer-div"> outer </div>
<div>
All the border on the bottom
.flex-div {
display: flex;
}
.outer-div {
border-right: 7px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 7px solid #cccccc;
max-width: 200px;
flex: 0 0 200px;
}
.mid-div {
width: 600px;
z-index: 1;
position: relative;
}
.inner-div {
background-color: #00b989;
width: 250px;
height: 50px;
display: inline-block;
z-index: -1;
position: relative;
}
<div class="flex-div">
<div class="outer-div"> outer
<div class="mid-div">
<div class="inner-div">inner</div>
<div class="inner-div">inner</div>
</div>
</div>
<div class="outer-div"> outer </div>
<div class="outer-div"> outer </div>
<div>
To understand your initial issue you need to consider painting order and stacking context. By applying z-index to parent element you create a stacking context and since all of them have the same z-index they will be painted considering the tree order. So we print the first element and ALL its content then the second and ALL its content and so on.
Following this logic you will see the left border of the first and the right one will be hidden due to the overflow of the content then you will see the left border of the second element on the top of all the previous content and so on.
Here is a basic example to better illustrate your issue:
.box {
border-left:10px solid red;
border-right:10px solid red;
height:50px;
width:100px;
display:inline-block;
vertical-align:top;
position:relative;
z-index:1;
}
.box > div {
width:130%;
height:60%;
background:blue;
}
<div class="box">
<div></div>
</div><div class="box" style="margin-top:20px;">
<div></div>
</div><div class="box" style="margin-top:30px;">
<div></div>
</div>
Added some offset to parent element so you can clearly identify the painting order.
Now if you set positive z-index to only child elements they will all get painted on the top of the all the parent elements.
.box {
border-left:10px solid red;
border-right:10px solid red;
height:50px;
width:100px;
display:inline-block;
vertical-align:top;
}
.box > div {
width:130%;
height:60%;
background:blue;
position:relative;
z-index:1;
}
<div class="box">
<div></div>
</div><div class="box" style="margin-top:20px;">
<div></div>
</div><div class="box" style="margin-top:30px;">
<div></div>
</div>
And if you apply negative z-index they will all get painted behind:
.box {
border-left:10px solid red;
border-right:10px solid red;
height:50px;
width:100px;
display:inline-block;
vertical-align:top;
}
.box > div {
width:130%;
height:60%;
background:blue;
position:relative;
z-index:-1;
}
<div class="box">
<div></div>
</div><div class="box" style="margin-top:20px;">
<div></div>
</div><div class="box" style="margin-top:30px;">
<div></div>
</div>
Applying any z-index value to parent element will make what you want impossible since the child elements will get trapped inside the stacking context of their parent.
Related question for more details: Why can't an element with a z-index value cover its child?
I have a very simple problem, but I can't solve it.
There is a div inside another div. The inner div is positioned absolutely out of the outer div (left: 100%). Moreover, the outer div should scroll vertically. However, I can't find how not to scroll horizontally and how to make the inner div be visible outside the outer div, at the same time.
The code is the following:
HTML:
<div id="out">
<div id="in">
</div>
</div>
CSS:
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
overflow-y: scroll;
overflow-x: visible;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
Thanks in advance!
.main_outer{
overflow-y:scroll;
border:thin black solid;
overflow-x:hidden;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left:100%;
width:70px;
height:auto;
background-color: red;
right:0;
}
<div class="main_outer">
<div id="out">
<div id="in">
Your Inner Contents
Your Inner Contents
Your Inner Contents
</div>
</div>
</div>
Here is JSFiddle
PS: Change your red div size to fit your contents.
Hope this helps.
Fixed the scroll with removing the overflow-x:hidden;
================ Latest Change ======================
See the latest change if this is what required but a little tweak in markup.
#outer-div {
overflow-y: scroll;
width: 165px;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
<div id="outer-div">
<div id="out">
<div id="in">
</div>
</div>
</div>
Let's say I have
<div class="fixed">
<div class="abs"></div>
</div>
and css:
.fixed{
position: fixed;
top:100px;
width:100%;
height:300px;
border:1px solid turquoise;
overflow:scroll;
}
.abs{
position: absolute;
width:50px;
height:50px;
top:-50px;
left:0;
border:1px solid orange;
}
Right now .abs and .fixed has the same parent and I use javascript to position it above the fixed element, but I wonder if there is an other way.
So is it possible somehow to make .abs visible? Fiddle
I did not really get the idea why you have to do that.
BTW. You should have a fixed container. HTML:
<div class="container">
<div class="fixed"></div>
<div class="abs"></div>
</div>
CSS:
.fixed{
position: absolute;
width:100%;
height:300px;
border:1px solid turquoise;
overflow:scroll;
}
.abs{
position: absolute;
width:50px;
height:50px;
top:-30px;
left:0;
border:1px solid orange;
}
.container {
position: fixed;
width: 300px;
top: 40px; left: 40px;
}
https://jsfiddle.net/fujmw79t/3/
Simply remove the overflow:scroll; on .fixed:
.fixed{
position: fixed;
top:100px;
width:100%;
height:300px;
border:1px solid turquoise;
}
.abs{
position: absolute;
width:50px;
height:50px;
top:-53px;
left:-1px;
border:1px solid orange;
}
<div class="fixed">
<div class="abs"></div>
</div>
I have this layout:
<div id="content">
<div id="foreground">
</div>
<div id="background">
</div>
</div>
<div id="footer">
</div>
I need background div displayed under foreground div, this I have done using position:absolute and it works ok.
problem is after setting both foreground and background absolute position they are taken out of normal flow, parent div (content) has no real width and this screws up footer position.
#background
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
#foreground
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
#content
{
position:relative;
}
#footer
{
position:relative;
}
Content width is dynamic so I can't set absolute position to footer and I really would like to avoid some javascript hacks, is there any solution to this?
I would have done it like this:
HTML:
<div id="content">
<div id="foreground">
Row 1<br>
Row 2<br>
Row 3<br>
Row 4
</div>
<div id="background">
</div>
</div>
<div class="clear"></div>
<div id="footer">
The footer
</div>
CSS:
#background
{
float: left;
background-color: #ff0;
position:absolute;
left:0px;
top:0px;
z-index:-1;
width: 100%;
height: 100%;
display: block;
}
#foreground
{
float: left;
z-index:1;
}
#content
{
position:relative;
border: 1px solid #f00;
float: left;
width: 100%;
}
#footer
{
border: 1px solid #f0f;
position:relative;
width: 100%;
}
.clear
{
clear: both;
}
Fiddle: http://jsfiddle.net/4LSZK/
Is there a reason you can't set a height on #content? So, something like this:
#content {
border: 1px solid red;
position: relative;
height: 200px;
}
#foreground {
position: absolute;
top: 50px;
height: 100px;
width: 100%;
background: yellow;
z-index: 2;
}
#background {
position: absolute;
height: 100px;
width: 100%;
background: red;
z-index: 1;
}
#footer {
border: 1px solid red;
}
Here's a fiddle: http://jsfiddle.net/DuWRe/1/
(I've added some borders and backgrounds so each element's position can be easily identified.)
I'm trying to get a css layout for all modern browsers going and having a hard time. I am not a css guru but hoping one could guide me in the right direction. I'm trying to get a layout similar to this one but with a 100% height left nav and 100% width for the rest. see below layout image.
Based on the link above, I have this, but missing the 100% height...
.wrapper {
width: 100%;
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
border: 2px solid #00f
}
.banner {
background-color: red;
height: 50px;
}
.contentBox {
background-color: pink;
height: 200px;
margin: 20px;
}
<div class="wrapper">
<div class="menu-vertical">side</div>
<div class="mainContent">
<div class="banner">banner</div>
<div class="contentBox">content</div>
</div>
</div>
Any help is appreciated, thank-you
here's the code:
<!DOCTYPE html>
<html>
<body>
<div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0; background-color:red;">Content</div>
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div>
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div>
</body>
</html>