flowing elements as usual after an absolute within relatively positioned element - html

I'm trying to overlay two elements on top of each other:
<div style="position: relative;">
<input style="position: absolute; top: 0px; left: 0px">
<div style="position: absolute; top: 3px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
So far so good... the two elements overlay fine, and this will work regardless of where on the page the DIV goes in the flow. But then I go to add the next element to the page:
<div>
PART 2 GOES HERE ABCDEFG
</div>
Uh oh, we have a problem! The next element gets placed under the previous one. How do I get subsequent content back into the normal static flow? The rest of the content can't have to know about this special element, i.e. if the element with the overlay is inserted anywhere in the document it should behave the same as if it was a single element of the same size.
Here's the Fiddle demonstrating the problem.

As #Santi points out, the content of absolutely positioned elements does not actually contribute to setting the height of the element. But, instead of setting a specific value for height (which may not be correct for all viewports), you can just change the input style to be position:relative so that it's height will be set. Then, you can position the overlay on top of it.
<div>
Content that goes first.
</div>
<div style="position: relative;">
<input style="position: relative;">
<div style="position: absolute; top: 1px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
Now, it should be said that you should avoid using inline styles as they create spaghetti code, don't promote code reuse and are difficult to override later, if you need to and, it seems that what you are actually trying to do can be done with basic HTML and no CSS at all:
<div>
Content that goes first.
</div>
<div>
<input placeholder="xxxx-xxx-xxx">
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>

Elements that are positioned using position: absolute; won't take up any actual height. Your position: relative; div will now also have a height of 0, because none of its children occupy any height.
By simply adding a height to this div, your elements should behave as you expect:
<div>
Content that goes first.
</div>
<div style="position: relative; height: 25px;">
<input style="position: absolute; top: 0px; left: 0px">
<div style="position: absolute; top: 3px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
EDIT: If you don't want a forced-height, you might be better off with this solution by Scott Marcus.

Related

Z-index not working img element hidden behind parent divs

I need to position the img element (along with other related info about the project) to the bottom right corner of the div with class 'projectItem green'.
Positioning works fine but I cannot get the img element under two parent divs to be visible on the screen. The element highlighting actually highlights the element but your can only see the grid around invisible element.
I tried to use that z-index with the img element instead of the div. I also tried to add display:block parameter to the img element and use z-index there.
Thanx a lot for any pointers!
Here is my code
<div class="projectItem green">
<div class="projectNumber">I-8000</div>
<div title="Testprojekt 25.05.2018" class="halfWidth">Testprojekt 25.05.2018</div>
<div class="halfWidth"><span>Start: </span><span>5/25/2018</span></div>
<div title="" class="halfWidth">UserName</div>
<div class="halfWidth"><span>End: </span><span style="margin-left: 8px;">6/1/2020</span></div>
<div class="halfWidth">Last status update:</div>
<div class="halfWidth"><span style="margin-left: 43px;">5/25/2018</span></div>
<div style="width: 100%; display: inline-block; position: relative; z-index: 1000;"><img style="position: absolute; bottom: 0; right: 0"
src="/system/pscbaf/ImagesLogos/IPM/IPM_NotReported_Icon.PNG">
</div>
</div>
Here is the screenshot from DOM
Here is what I am getting
Here is what I am trying to achieve

Weird text wrap behavior in nested absolute positioned divs

consider the following code:
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>
Don't ask me why both #p1 and #p2 need an absolute position, they are part of a legacy component I can't change.
I expect #c to grow with the text until it reaches the max-width of 120px. However, how you can see in the example, the text breaks at every word.
This behavior appears only if I have 2 nested parent divs with position absolute. I tried to play with properties such as white-space and word-wrap with no success.
I'm really interested in finding out why such behavior occur. Does anybody has an answer?
Absolute positioned elements need width and height settings, otherwise they don't expand. Try to add some settings, for example this:
#p1, #p2 {
width: 400px;
height: 300px;
}
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>

What is the difference in behavior of this two pairs of tags(see in)?

First example
<div style="position: relative">
<div style="position: relative; top: 10px">text</div>
</div>
Second example
<div style="position: relative">
<div style="position: absolute; top: 10px">text</div>
</div>
The first will position the inner div 10px top relative to where it would be positioned.
The second will position the inner div 10px top to where it would be positioned ignoring the padding and border of the outer div, and removing it from the flow of the document.
Well an absolutely positioned element does not take up space in the dom so the outside div would have no height. That's one thing it does. I would encourage you to read up on it and just test things out in a codepen though, this isn't really the place for this.
The first will leave a "ghost" behind of the moved element. The second takes it fully out of the flow of the document.

Break div out of overflow: hidden while retaining page structure

I'm currently trying to break a child element out of it's parent which holds overflow: hidden.
The reason for me restricting the dimensions of it's parent are purely for a JavaScript hack. I have tried positioning the child however this still breaks the pages structure and position fixed will be uneffective.
This is the closest I have got so far to achieving this:
<div style="position: relative;">
<div>
<!-- Needs to be overflow hidden and 0 width -->
<ul style="overflow: hidden; width: 0px; height: 0px;">
<li>
<!-- Needs to be visible -->
<div style="position: absolute; top: 0px; left: 0px;">
Tab Content
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/0uwv3nyj/
Does anyone know any kind of css hack or workout to solve this while retaining a standard block display to the element?
Thanks,
Simon
I'm not sure I fully understand your question, but try setting the ul visibility to hidden and the div visibility to visible:
ul --> style="visibility:hidden; height:0;"
div --> style="visibility: visible;"

Remove css position absolute while keeping element inline

How can I accomplish this without using an absolutely positioned span?
<div>
<span style="position: absolute; right: 5px;">[details]</span>
<div style="background-color: White;">
<span style="white-space: pre;">foo: ! Bar: ?</span>
</div>
</div>
The position: absolute; is causing display errors and needs to be adjusted. How can change this markup to show the same as here: http://jsfiddle.net/yHHAL/ but without using position: absolute;? The order of the elements can change if they have to.
Use float: right instead of your position: absolute.
http://jsfiddle.net/Wexcode/xtzzq/