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
Related
I'm trying to adjust the width of a div-element but it's affecting the button inside instead of the div itself. Here's my Code:
<div class="contentbox" id="block-upload" style="width: 300px; position: relative;">
<div class="legende">"Uploads"</div>
<button type="button" name="upload" value="Datei-Upload" style="position: absolute; bottom: 15px;">Testbutton</button>
</div>
</div>
It looks like it's caused by the 'position'-styles I put on the div and the button but I don't understand why and how to fix it. I need my button to be at the bottom of the div and I need my div to be a certain width so any ideas are welcome.
<div class="box">
<div class="top">
</div>
<div class="bottom">
<img src="//placehold.it/300x300">
</div>
</div>
.bottom{
position: absolute;
bottom: 0;
}
I got 2 blocks, top and bottom. In bottom block there is an image that should overlay top block in one place. it overlays Ok but I can't click on element from top block cause browser think i click on bottom. How can it be resolved?
Add
pointer-events : none;
to your .bottom element.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Is there an easy way (without manually setting any heights) to make sure a parent element always wraps/contains a child, even if the child has been relatively positioned?
<div style="background-color: red;">
<div style="background-color: pink; position: relative; top: 20px">
one.
</div>
</div>
<div>
two.
</div>
In the example above the "one." div flows out of its parent and overlaps/hides the "two." div, but my desired effect is to have the parent div contain the whole of the child and the "two." element flowing underneath.
top is used to position element so that it has no effect on the surrounding elements. Use margin-top if you want to affect the parent as well, otherwise top doesn't affect the other elements.
<div style="background-color: red; display: flex;">
<div style="background-color: pink; position: relative; margin-top: 20px">
one.
</div>
</div>
<div>
two.
</div>
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.
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/