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.
Related
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.
I know this title is probably about the most common on SO, but I seem to have a very specific problem that I can't find documented.
I have a div that I want to be exactly square, so I followed the CSS advice in this answer. I also want a child div to fill this space, so I've followed all the standard guidelines of having a clear:both div in a wrapper, etc, but my child div is still not filling its parent. The problem is the height: 0 of the parent div - is there a solution to this but still maintaining the exact square (preferably pure CSS, I'm aware there are JS solutions). Example of this is at this fiddle.
You can give the inner box an absolute position and set it to conform to the edges of the containing box:
.box div {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(0,0,0,0.1);
}
jsfiddle
Not sure if it's any better to what you proposed, maybe if you wanted content in the box?
If you're not too worried about support then using vh, vw, or vmin would be a good alternative. Since height would actually be set you could easily set the child element to fill the parent.
CSS:
.parent {
width: 50vmin;
height: 50vmin;
background-color: blue;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
background-color: red;
}
HTML:
<div class='parent'>
<div class='child'></div>
</div>
Here's an example. I like vmax, but it's not as well supported as vmin, vh, and vw.
This padding trick for responsive boxes work with absolute positioning.
css-padding-trick-responsive-intrinsic-ratios
So use absolute positioning for inner div.
.box {
...
position: relative;
}
.box div {
...
position: absolute;
left: 0;
top: 0;
}
Adding padding-bottom: 100% to the child div does fill the space and seems to be a fix; the updated jsfiddle reflects this
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
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
Exactly as the title says, I have an element that dynamically resizes itself to fit the content. I would like this element to be positioned proportionally to its size (so it stays centered on a fixed point). The problem I'm facing is that the parent element I'm using to position the child element is not inheriting the calculated size of the child element. I don't know if there's any CSS tricks to make the parent element get it's child's height without having to specify it using javascript.
The following fiddle demonstrates the problem, with the issue being displayed on the left and the desired final product on the right (minus the ability to do it dynamically).
http://jsfiddle.net/YEcx6/
The html:
<div class="parent">
<div class="child">This content is dynamic</div>
</div>
<div id="static" class="parent">
<div class="child">This content is static</div>
</div>
and the CSS:
.child {
position: relative;
right: -50%;
top: -50%;
}
.parent {
position: absolute;
top: 50px;
left: 10px;
background: #ddd;
}
#static {
left: 100px;
height: 54px;
}
.child {
background: red;
max-width: 50px;
}
== EDIT ==
I now know there is no way to do any relational positioning with regard to height without using javascript.
What about height:auto and width:auto on the parent ?
The problem is in order to get the vertical positioning to work right, you need to have a defined height to reference by. Since you want a dynamic height, it makes it challenging. I tried using negative margin-top instead of top but that, as I suspected, defaults to using the width of the element to determine the height offset (which does not achieve your effect). I found a solution that might work for you if you can compromise by setting the position of the upper left corner of the .child rather than the upper left corner of the .parent. Here is the solution, with the explanation following (this was only tested in FF).
HTML
<div class="parent">
<div class="child">This content is dynamic
<div class="bkg"></div>
</div>
</div>
CSS
.parent {
position: absolute;
top: 50px;
left: 10px;
}
.child {
position: relative;
}
.bkg{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: -50%
left: -50%;
right: 50%;
background-color: #ddd;
z-index: -1;
}
The .parent now is supposed to be the final position of the upper left of where .child will be. The .child contains the content you want but gives a relative position by which .bkg will be related. By giving .bkg a width and height of 100%, that set's its size, which apparent is enough to correctly then calculate the correct 50% offsets to reposition it down and to the left (which is the same relationship you wanted for your original look).