I want to have a nested div appear over its parent, while the parent has overflow-y: scroll
<div id="parent"><div id="child"></div></div>
And the css:
#parent {
position: absolute;
width: 150px;
height: 150px;
background-color: green;
overflow-y: scroll;
}
#child {
position: absolute;
width: 100px;
height: 100px;
top: 70px;
background-color: red;
z-index: 2; (????)
}
Want I would like to get is the red div to actually appear over and outside the green one without activation the overflow property.
But it's just rendered over its parent, which then proceeds to overflow with the scrollbar. So it is over the parent, which it naturally is, but not outside it and I sadly can't just ditch the overflow-property. I just want to ignore it for that one element and pretty much change it to overflow: visible.
Child cant exit parent's DIV. You need to use position:absolute, or even two different parent divs.
See here: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
And here's a css trick solutions: https://css-tricks.com/almanac/properties/z/z-index/
Good luck, next time just post the code in jsFiddle.
Related
I want to know how to position multiple div's on each other, without position absolute in HTML.
I tried with position: absolute but due to this, I have to specify container div height explicitly, which I don't want to do.
How do you want to place them exactly ?
If they are div, they should be on top of each other with position: static by defaults. If you don't want to use position: absolute, you could use negative margins. This is not a recommended solution, but the hack definitely works.
.d1 {
background-color: red;
height: 200px;
width: 150px;
}
.d2 {
background-color: blue;
height: 150px;
width: 100px;
margin-top: -100px;
}
<div class="d1"></div>
<div class="d2"></div>
Note that you can use % margins if needed but the % margin properties will always be a percentage of the parent block WIDTH. So be careful with that.
NB : Tanks to #Oriol for correcting mistakes I made. I edited my answer thanks to his advice.
Not sure what you're trying to achieve but I can imagine only one scenario, where something like that would be usefull. Namely switching between several divs. If that's the case use display:none on all but the current div.
In anyway child div is by default "overlapping" with parent div, so I assume what you mean is that you want siblings to be "on each other"... however that sounds.
The only way to do this is (except for negative margin hacks) absolute and relative positioning.
Here's how:
#foo{
background-color:red;
height: 50px;
width: 50px;
position: relative;
}
#bar{
background-color:blue;
height: 50px;
width: 50px;
position: absolute;
}
#foobar{
background-color: green;
height: 50px;
width: 50px;
position: absolute;
}
#raboof{
background-color: yellow;
height: 50px;
width: 50px;
}
<div id="foo">
<div id="bar"></div>
<div id="foobar"></div>
<div id="raboof"></div>
</div>
Jsfiddle: https://jsfiddle.net/t81hvsa1/
Keep in mind that: 1. You may but don't need to make last child absolutely positioned. 2. The last absolutely positioned child will always be on top.
Edit: I've just noticed, this question's discussion has all the answers you could possibly want; more elaborate and better formatted at that.
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
I have two divs that I would like to place one on top of the other, so I can create a tab system in an applet I am making. These two divs reside within a parent div, that uses auto height because I do not know the exact height of the other two divs (both children will be of same height). I can position the two divs one on top of the other with absolute positioning when the parent uses relative positioning, but the auto height doesn't respond (most likely because of absolute positioned children) creating a border line of an empty div instead of a wrapper with elements inside.
See problem here: http://jsfiddle.net/h5bjt69s/
<div id = "parent">
<div id = "redDiv"></div>
<div class = "clearfix"></div>
<div id = "blueDiv"></div>
</div>
I tried modeling a solution from this, but I believe the auto height throws things off.
Position absolute but relative to parent
How can I wrap the two divs with the parent div and still maintain the overlaying of the two children?
This:
both children will be of same height
Actually solves your problem:
Position one div using position: static; it will determine the height of the parent
Position the other div(s) using position: absolute (it will appear on top)
Updated Fiddle
Here are the changes
#blueDiv {
background-color: blue;
width: 100%;
height: 50px;
position: relative;/*changed*/
top: 0px;
left: 0px;
z-index:2;/*added*/
opacity:0.7;
}
DEMO
Another Style
#blueDiv {
background-color: blue;
width: 100%;
height: 50px;
/*position: relative;removed*/
opacity:0.7;
}
#redDiv {
background-color: red;
width: 100%;
height: 50px;
visibility: visible;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;/*added*/
}
Updated
I've got a div that contains a photo tiling style I've been working on. The parent div over all the photos is position:relative while the divs inside holding the photos are position:absolute
I have to use 'position:absolute` for the children to get the layout I want but the problem arises when the parent div (either .daddy or .floatcont) doesn't register with a height and appears empty.
How can I make the parent register a height so I can put content below it on the page?
Code here: http://codepen.io/jeremypbeasley/pen/iBgsp
.floatcont {
position: relative;
background: pink;
width: 90%;
margin: 5%;
}
.floatpic {
position: absolute;
width: 40%;
margin-bottom: 10vh;
}
Absolute positioned elements are removed from the flow, thus ignored by other elements. So you can't set the parents height according to an absolutely positioned element.
In your case, I have come up with one solution. Update your .sixth class like below.
.floatpic.sixth {
top: 270vh;
width: 50%;
z-index: 6;
position:relative;
}
Updated CodePen
I saw a similar post dealing with this issue, but my problem is a wee bit different.
In the issue outlined HERE, the concept is that an OUTER div be positioned relative, and the INNER div be positioned ABSOLUTE, and the overflow:hidden would be preserved.
My issue is that BOTH divs, INNER and OUTER are positioned absolute. How can I still preserve the overflow: hidden on the OUTER div?
Not sure of your question, but is that what you try to achieve?
See this jsfiddle
CSS:
#outer {
position: absolute;
top: 10px;
left: 10px;
height: 80px;
width: 50px;
overflow: hidden;
}
#inner {
position: absolute;
top: 10px;
left: 10px;
height: 50px;
width: 50px;
}
with the html:
<div id='outer'>
<div id='inner'>
// Your stuff here
</div>
</div>
position: absolute;
If you apply position: absolute; to any block element(ex: div class="inner" ), the container block( ex: div class="outer" ) can't determine the dimensions of that element.
overflow: hidden;
Applying overflow: hidden; to any element means, it detect the real dimensions of that element. If that element have given dimensions( width: 200px; height: 200px; ) Overflow: hidden; determine the dimensions of the element as 200px,200px. If the element dose not specify the dimensions, Overflow: hidden determine the area of total ingredients as the dimensions of that element.
So in your case, You would apply a fixed width and a fixed height to your outer block. Otherwise you can't apply both overflow hidden, and position absolute to outter block in the same time.
If it is not possible to applying fixed width and height, css hs small tricks depending on the design. If you might explain the design more, I may explain more.