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/
Related
I want to be able to fix a element on the display and screen at the same position, but don't want to use position: fixed, as it causes problem to other elements. I want the element to be above other elements, so I have used z-index. Also, I want the element to be able to move from side to side, but not scroll across the display. The following is the code that I am working with:
<div style="position:relative;z-index:3;height:100%">
<div style="position:absolute;bottom: -460px;right:-30px;height:100%;">
<div style="position: sticky;top: 800px;">
<a class="btn btn-default dropdown-toggle" style="background-color:#00AF95;border-radius:50%;margin-left:100px;" data-toggle="dropdown" onclick="$('#floatingButton').toggle();" data-hover="dropdown" aria-expanded="true">
<i class="fa fa-plus" style="background-color:#00AF95;color:#f7f8fa"></i>
</a>
<div class="dropdown dropdown-inline" style="width:250px;display:block;bottom:80px;">
<ul class="dropdown-menu SMSUI" role="menu" id="floatingButton" style="display: block;">
<li class="dropdown" data-hover="dropdown" title="Send SMS to a Number"[enter image description here][1] onclick="(this.event.stopPropagation());">
<div id="numberDialerField" class="pad10R pad10L">
<input type="text" id="phoneCodeNumber" style="margin-left:10px;width:60px;" name="phoneCode" class="softphone-form-control" data-i18n="[placeholder]phonecode" placeholder="Ph. Code" value="">
<span>-</span>
<input type="text" id="telNumber" name="phoneNumber" class="softphone-form-control" data-i18n="[placeholder]label_phone_number" placeholder="Phone Number" value="" required="">
<div class="telFuncBtnDiv">
<span id="backspaceBtnSpan" class="cursor-pointer">
<i class="fa fa-check fa-xs"></i>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
For reference I have attached a sample image that helps understand the solution that I want, but not quite. I want the movable element to stay fixed and not move at all using position: sticky.
I want the Icon to stay at this position without position: fixed
You can achieve this by:
Parent:
position: absolute;
...
Child:
position: sticky;
top: 0;
height: 100vh;
Note 1: Make sure the parent elements (up the DOM tree) do not have overflow: hidden. If so, change it to overflow: visible
Note 2: Make sure the child element is given a fixed height (not %)
If the element is truly independent and hierarchically above the other elements, I would move the div out of the other nested divs. Also, by moving it, it will no longer be a child element of your parent that has position:relative applied to it. That is probably the issue you are experiencing with the positioning.
By the way, you will get deeper browser support by using fixed vs sticky.
Yes we can update using postion fixed to the parent by setting height. And the child using the calc css property. we are able to achieve it. Here is the link below
DEMO: https://jsfiddle.net/ssuryar/02hmwkcy/11/
Parent
.position { position: fixed; height: 100%;}
Child
.position .row {position: absolute; left: calc(100% - 60%); top: calc(100% - 60%);}
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
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.
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.
I have an issue making #bgimage align to the right of the window
<header id="header" style="
">
<img id="bgimage" src="http://**.com/wp-content/uploads/2013/05/sparkler-test.png" style="position: absolute; float: right;display: block;">
<div id="site-title" style="position: absolute; clear: none;">
<a href="http://**.com/" rel="home">
<img src="http://**.com/wp-content/uploads/2013/02/LOGO-5.0.jpg" alt="" width="369" height="66" style="position: absolute;">
</a>
You can't combine position:absolute and float. Use one or the other. If you choose position:absolute, make sure to add right:0 and be careful of content going behind it.
Something like this is probably what you're looking for.
position: absolute; right:0; display:block;
You may want to specify a width also, since block elements will by default take the full width of their container.
Also, I noted the ID is bgimage, are you trying to set a background? If so, you can do that with the CSS background or background-image property.