Can this be done?
It seems like this should be possible. In general, I want the whole panel (div) to flow as you would usually expect within the body. However, I'd like to absolutely position the controls within the panel.
My experience is that when I try to absolutely position a control within a flow panel, the controls are not treated as being contained by the panel with relative coordinates of it container.
You can do this with a flow panel in WinForms and I like the mix of approaches. In my mind, it would be the best of both worlds, though I expect responses saying it would be a bad thing.
Comments?
Change the CSS 'position' property of the <div> to 'relative'. If your HTML looks like:
<body>
<div id="container">
<a id="control">start</a>
</div>
</body>
then update the CSS to:
#container {
position: relative;
}
#control {
position: absolute;
top: 0;
left: 0;
}
The #control element will now be relative to the #container.
Given this HTML:
<div class="panel">
<h2>Panel title</h2>
<div class="close">x</div>
<div class="content">Panel content</div>
</div>
You can use this CSS:
div.panel{
position:relative;
}
div.panel h2,
div.panel div.close,
div.panel div.content{
position:absolute;
}
<div class="panel"> will remain in the usual document flow, while each of its children will be absolutely positioned within that panel.
If you set the div to have position: relative, any child elements of the div can be absolutely positioned within the div by setting them to have position: absolute.
Example:
HTML:
<div id='panel'>
<div id='control'>I'm positioned absolutely!</div>
</div>
CSS:
#panel { position: relative; width: 300px; height: 100px;}
#control { position: absolute; top: 10px; left: 20px;
Related
I would like to have a child div extend to be the same width as it's parent's parent. So with HTML structure like this:
<div class="pp">
<div class="p">
<p>
Some text
</p>
<div class="c">
This is the thingy!
</div>
<p>
Some more text
</p>
</div>
</div>
I would like div.c to extend to the borders of div.pp.
I know this is possible with negative margins, but in my situation I am not aware of the margins of div.pp beforehand. I'm aware I could write some JavaScript to do this, but I am interested in a CSS only solution. I'm also aware that changing the structure of the HTML could solve this problem, however that is also not an option.
Here is fiddle illustrating the HTML and some helpful CSS:
https://jsfiddle.net/y37mLkzu/1/
There is an example there of fixing this with negative margins.
I am not sure if this will work in your situation, but it is the only other way without using a fixed minus margin and only using pure CSS. I have added :before and :after to .c and absolute positioned them at either side of the .c element. I have also added overflow hidden to the .pp wrapper to cut off the excess absolute positioned elements.
p {
margin:0;
}
.pp {
padding: 0 6px 0 6px;
width: 100px;
background-color: black;
overflow: hidden;
}
.p {
background-color:white;
}
.c {
background-color:red;
position: relative;
}
.c:before, .c:after {
content:"";
position: absolute;
top:0;
background: red;
height:100%;
width:100%;
}
.c:before {
left:-100%;
}
.c:after {
right:-100%;
}
<div class="pp">
<div class="p">
<p>
Some text
</p>
<div class="c">
This is the thingy!
</div>
<p>
Some more text
</p>
</div>
</div>
Cant you use positions? Just curious to know. If I use position:absolute, it will work.
I would like my parent div to adjust its size based on the content but my problem is the contents are using position: absolute; therefore rendering the parent div as if it doesn't have any content.
Here's a Fiddle and the corresponding code:
HTML
<p>Gray box adjusts based on the green box's size.</p>
<div class="box">
<div class="block"></div>
</div>
<p>Gray box doesn't adjust because the green box is absolutely positioned.</p>
<div class="box">
<div class="absolute block"></div>
</div>
CSS
.box {
padding: 5px;
background-color: #888888;
}
.block {
width: 60px;
height: 60px;
background-color: #65da98;
}
.absolute {
position: absolute;
left: 50px;
}
I guess what I want to take from this question are the following:
What are my possible solutions?
Which of those solutions would be best if we're to take into account cross-browser friendliness?
I have the following div table:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div id="innerDiv"></div>
</div>
</div>
</div>
Inside the cell is a div with the id "innerDiv". Is there a way to position this div such that its top/left corner is located anywhere within the cell? I tried all the css position values but none work.
We're not supposed to give the same element table-cell display and relative position. It's not supported equally between modern browsers (try this in FF).
If it's the only way you can do things on your specific case, add a relatively positioned wrapper div inside the cell.
For example:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div class="relativeDiv">
<div id="innerDiv"></div>
</div>
</div>
</div>
</div>
.relativeDiv
{
height: 100%;
width: 100%;
/* You may need some negative margin
if there's a padding on the table cell */
position: relative;
}
#innerDiv
{
position: absolute;
/* You're now free to set the top and left attributes freely */
}
For further reading:
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
Does Firefox support position: relative on table elements?
You should use position property in outer div explicitly（such as: relative,fiexd,absolute)
div {
position: relative;
};
#innerDiv {
position: absolute;
left: 10px;
}
HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.
<div id="parent" style="overflow:hidden; position:relative;">
<div id="child" style="position:absolute;">
</div>
</div>
I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible?
parent element has position:relative;
child element gets stripped as soon as it's out of it's parents borders.
(elements have additional css defined I just put style attributes for clearness)
It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.
See: http://jsfiddle.net/thirtydot/TFTnU/
HTML:
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
CSS:
#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
#parent {
position: relative;
background: red;
width: 100px;
height: 100px
}
#child {
position: absolute;
background: #f0f;
width: 300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
The code below works like a charm.
<div id="grandparent" style="position:relative;">
<div id="parent" style="overflow:hidden;">
<div id="child" style="position:absolute;">
</div>
</div>
</div>
The Problem has a Name: "offsetParent". As soon as an element gets the position abolute|relative or has its position/size altered by a transformation, it becomes the offsetParent of its children. The original offsetParent for all elements (and therefore the area in which overflowing content will be shown or relative to which absolute positions are given) is the viewport of the browser or the iFrame. But after an absolute or relative position had been applied to an element, ist bounding box is the new origin for positioning and clipping of all of ist children.
In a Project, I had a 'popup' window containing a pulldown menu. The pulldown could easily extend over the limits of the window. But as soon as the window was moved (by using a transformation or relative positioning), the pulldown appeared at a wrong place (having the top-left Position of the window as additional Offset) and was clipped at the window's borders. The quick hack I used was to append the pulldown as child of Body (instead fo the window) and position it absolute, using the coordinates of the button that opens the menu (from the clientBoundingBox of the button) and the offset from the button's offsetParent) as absolute position of the pulldown. Then the Body again was the limiting area. This is, however, a bit tricky if it comes to multiple Levels of z-axis ordering (as the pulldown's z-axis is relative to Body, which might be different from the one the window has). But since the window has to be visible (therefore on top) to open the menu, this was negligible.
Of course, this solution requires the use of JavaScript and cannot be done by simple CSS.
You can't eat the cake and keep it. If you take something out of the layout context, it becomes ist own, indepenent (and limited) layout 'frame'
I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.
<div id="parent" style="position:relative;">
<!-- floating divs here -->
<div id="child" style="position:absolute;"></div>
<div style="clear:both"></div>
</div>
Use css...
* {margin: 0; padding: 0;}
#parent {width: auto; overflow: hidden;}
#child {position: absolute; width: auto;}
With width auto it will always append to the smallest possible size; and with the reset it will help maintain natural flow.
But if the child is bigger in any way than the parent, then it will not be possible. But with this CSS I think you will achieve what you want to the maximum of what is possible.
I did this in a very simple way
<div class="rootparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.rootparent {
position:relative;
border:1px solid #ccc;
width:150px;
height:150px;
}
.parent {
overflow:hidden;
}
.child {
position: absolute;
top: -10px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid red;
}
Here is jsfiddle link
thirtydot's solution is actually a good idea.
Here's a clearer example: http://jsfiddle.net/y9dtL68d/
HTML
<div id="grandparent">
<div id="parent">
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
</div>
<div id="child">
dudes
</div>
</div>
CSS
#grandparent {
position: relative;
width: 150px;
height: 150px;
margin: 20px;
background: #d0d0d0;
}
#parent {
width: 150px;
height: 150px;
overflow:hidden;
}
#child {
position: absolute;
background: red;
color: white;
left: 100%;
top: 0;
}
I believe, every front-end developer encountered this situation, at least once. Let's say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.There is a css trick to do this.Please find the below demo example for it...
<br><br><br>
<div class="grand-parent">
<div class="parent">P
<div class="child">child</div>
</div>
</div>
css code:
.grand-parent {
width:50px;
height:50px;
position:relative;
background-color: grey;
}
.parent {
width:10px;
height:30px;
overflow:hidden;
background-color: blue;
}
.child {
position:absolute;
width:50px;
height:20px;
background-color: red;
top:-10px;
left:5px;
}