My problem is similar to this post: How do I position an element relative to another without taking up space.
Though what I want is not exactly what was proposed there. But until now it was the closest example which I could find.
From what I understand, in this example, the position of the element in question gets updated only when a click on an icon-element is detected.
But with position:fixed that would mean that a scrolling wouldn't change the position.
What I want is to move the relatively positioned element dynamically with its parents while it does not take up its original space. (Background: I want some submenu-item-div to appear above its parent.) So the structure is similar to this:
<div class="entry-options">
<div class="menu1"></div>
<div class="menu2">
<div class="submenu2"></div>
</div>
</div>
submenu2 should be positioned above the entry-options (a horizontal bar) without changing its height or width, which should only be determined by the menu* - items.
Is that possible without changing the structure?
If you add position: relative; to the parent and position: absolute to the child, the child will be positioned relative to the parent without taking up original space.
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
I have a bunch of html that is absolutely positioned and then html snippet that is supposed to show after that. But they over lap.
http://jsbin.com/okamot/1/edit
Everything under .drag-drop is supposed to be absolutely placed so the height and width of .drag-drop become zero. The exhibit button and the exhibit text are supposed to show after the bolded This is Drag and Drop Item. But because the height of .drag-drop is zero it shows right over the contents of .drag-drop`.
I have had this issue before, but fortunately it was easy to calculate the height of the children of .drag-drop and then I would set the height of the .drag-drop to be that using javascript. This time it is harder as it contains more children and they are not constant. How would I change my css so that the Exhibit shows below the drag drop ?
Absolute positioning removes the element from the layout, therefore the children are no longer part of the calculation of the parent's sizing. You'll need to use JS to solve this.
The best way is not to make the content absolute positioned at all. Could you make them relative positioned, or float them? You can still manipulate their position, height, width, etc., and they'd have layout so the containing div would have the correct height.
Note if you float them, you may need to add a "float breaker" at the bottom of the containing div to get it to calculate the height correctly:
....
<div>some floated content</div>
<br style="float: none;"/> // float-breaker right before containing div closes
</div>
Otherwise the previous answerer is correct, you'll need some js hackery.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.
But I noticed, with some css, below code is interesting:
<div>
<div>
</div>
</div>
The parent divs highlight area didn't cover the child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?
There are some cases:
If the child uses position: relative; top: 200px and move away from the parent.
If the child does something similar using a negative margin. (similar to 1)
If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.
It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:
<div style="clear: both"></div>
It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.
You may please show the css to get clear idea.
If the inner element is floating or positioned absolutely, it won't affect the size of the parent.
If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.