I'm coming from a flash/flex background, so forgive me if this is an off question, but I'm wondering if I can place an element at exactly some pixel position on the screen. Pixel can be substituted for any measurement of position.
Is this even possible in javascript? How do you control where elements are drawn in javascript/html?
myEl.style.position = 'absolute';
myEl.style.left = x+'px';
myEl.style.top = y+'px';
Note that this will position the element absolutely with respect to its positioned parent; you may need to account for the position(s) of the positioned parent(s) to get it absolute to the screen.
Using CSS, you can set the position of any element to an absolute value, like so:
#myelement {
position: absolute;
top: 100px;
left: 100px;
}
One caveat to that is the position can be set to relative to any other element in your HTML. By default, it's relative to the window. You can make the position relative to any other element like so:
#mycontaining-element {
position: relative;
}
The HTML might look like this:
<div id="mycontaining-element">
<h1 id="myelement">Headline</h1>
</div>
More info here: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Yes, this is called absolute positioning.
Related
There is a <div></div> in my Angular project, that's displaying a dialog when the user click an 'Edit' button to edit field in a table.
I have just added a 'close' button to the dialog, but am having some trouble positioning that button correctly...
The <div></div> is defined with:
<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
...
<button class= "icon icon-close-selected" ...></button>
...
</div>
In the .scss file, I've added the block for this <div>, and added some styling to the icon:
.provContactSelector {
.icon {
appearance: none;
background-color: transparent;
position: relative;
border: none;
right: 50px;
}
}
I want the close button to be displayed just slightly in from the right hand side of the dialog, but as it stands, it's currently displayed just over half way across the width of the box, and so is displayed on top of the dialog title.
If I change the positioning to right: 5px;, recompile the CSS, and view the page in the browser again, I can see that the close icon has moved further to the right, but is now just right at the end of the dialog title, and there is still a lot more space to its right, before the edge of the dialog...
How can I anchor the close icon to the right hand side of the dialog, so that it's always displayed relative to where that is?
you defined the icon as position: relative. For what you descrived, I understood that you want to position the icon in absolute way, taking provContactSelector as the reference. In this case you should change the css to the following:
.provContactSelector {
position: relative;
.icon {
appearance: none;
background-color: transparent;
position: absolute;
border: none;
right: 50px;
top: 50px; // or whatever the value you need
}
}
Explanation:
position css instruction can be a bit tricky, and I have a lot of people having some confusion with how it works. So I will try to briefly explain what is happening:
position: static is the default value of a normal html block, and it positions itself depending of the other blocks that are around it. css like "top, left, right, bottom, z-index" won't work on them.
position: fixed an element defined as fixed will ignore all the blocks defined in the page and will position itself using the windows element (the whole document) as reference. you can position it using css like "top, left, right, bottom". You can define if other elements are on top of it or under it using "z-index".
position: absolute an element defined as absolute will ignore all the blocks defined in the page and will position itself using its nearest parent that IS NOT position: static as a reference. You can position it using css like "top, left, right, bottom". You can define if other elements are on top of it or under it using "z-index".
position: relative can be defined as an hybrid between absolute and static. The element will take in account the blocks that are near itself to find its position in the document. however, you can modify that position using "top, left, right, bottom", but that position will use as a reference the original place the element was located. This type of elements can also use "z-index".
Overall, position relative has properties from "absolute" and "static". I have yet to see a "position: relative" element in where using "top, bottom, left, right" is justified, because makes the element to be less predictable, and you can displace it using padding or margins instead.
Usually, position relative elements are defined not because you can position them with "top, left, right bottom" but because making them relative will let you position elements inside of them with "position: absolute" taking the relative element as reference.
Most of the problems I have found that confuse people is due the name they have: "absolute" looks like you will position the element taking in account only the windows, and "relative" sounds like you are using other element as base. However, the truth is that "absolute" is not absolute at all, it takes is position in relation of other element.
edit: as geeksamu mentions, the "icon" is a class, so it should have a dot before.
I think the problem with your code at
.provContactSelector {
icon {
icon is a class so it should be .icon not just icon
With the settings you use, the element will be moved 50px left of its original position, because you use position: relative; and right: 50px (i.e. right border 50px away from original right border). To achieve what you describe, you should use position: absolute;. But note that for the absolute position to relate to the parent element, the parent element needs to have position: relative;.
When I execute that style.top statement, the image doesn't want to change 600 px from the top.
document.getElementById("testing").onclick = function(event){
document.getElementById("image").width=400;
document.getElementById("image").style.top = "600px";
}
#testing{
color:blue;
}
<p id="testing">
aewrfafffffffffffffffacvfav
</p>
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>
From my understanding, that should work. I don't know what's going on.
In a nutshell, how can I change the position of an image with JavaScript?
There's the position absolute thing, but not sure.
The top, right, bottom, and left properties specify the position of positioned elements. -positionMDN
Your image element is not positioned, and as a result using top, right, bottom, or left will have no effect. In order to position an element without altering the flow of the document (which using fixed or absolute will do) you can use position: relative; and it will remain in the document flow while now being considered "positioned".
document.getElementById("testing").onclick = function(event){
document.getElementById("image").width=400;
document.getElementById("image").style.top = "600px";
}
#testing{
color:blue;
}
#image{
position: relative; /* <- positioning */
}
<p id="testing">
aewrfafffffffffffffffacvfav
</p>
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>
What Is Positioning?
By default, elements flow one after another in the same order as they appear in the HTML source, with each element having a size and position that depends on the type of element, the contents of the element, and the display context for the element as it will render on the page. This default flow model for HTML layout doesn't allow a high level of control over the placement of elements on the page. By applying a small set of CSS attributes to the elements that are defined for the page, CSS can control the precise position of elements by giving exact coordinates. -About Element PositioningMSDN
The top property by itself does absolutely nothing. The elements needs to be positioned as well. For example, position: relative or position: absolute.
The top, right, bottom, and left properties specify the position of positioned elements.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position
An example where the image is positioned relative to the container and the top property is changed after clicking the paragraph:
document.getElementById("testing").onclick = function(event) {
document.getElementById("image").style.top = "100px";
}
.container {
position: relative;
}
img {
position: absolute;
width: 400px;
}
<div class="container">
<p id="testing">aewrfafffffffffffffffacvfav</p>
<img id="image" src="http://lorempixel.com/g/400/200/" />
</div>
I want to center a tooltip which can have a varying width depending on content property.
I see in this example that we can moddify pseudo class, But it seems a little bit complicated.
$(".tooltip").prop('id', function(i){
return "p_number_"+i;
}).hover( function() {
var width = window.getComputedStyle( this, ':after').getPropertyValue('width');
document.styleSheets[0].addRule('#'+this.id+':after','margin-left: -"'+width/2+'px";');
})
There not a simplest solution ?
Pseudo elements are a mess to manage. Often, when the changes are static, you toggle a class (like it the exemple). But in your case, every elements have a different width which make it more difficult to control.
Luckily you don't need JavaScript to center the pseudo element. You can use CSS transform if you don't care about IE8. Instead of giving a negative margin of half your width, give it a transform:translate(-50%,0);. It center horizontally. In case you need to center it vertically, use transform:translate(-50%,-50%);
Given the element has position absolute or relative then you can center pseudo element using this css
position: absolute;
left: 50%;
transform: translateY(-50%);
I've got an ASP.NET page with a master page, which for whatever reason causes top:0; left:0 to be just under the master page. Inspecting my generated DOM, I've found that <body> is at the very top of the page, where I need to position the <div>. How can I use JQuery to position my <div> at the exact same location as my <body> tag?
The reason that top:0 would not actually be the top is that the div must be contained within an element which has position: relative or position: absolute (more likely, relative).
The easiest way to fix this would be to append the div directly to the body.
$("#yourdiv").appendTo("body");
$("div").css($("body").offset());
Did you try this in your CSS?
html, body {
margin: 0;
padding: 0;
}
Use .offset():
$("#myDiv").offset({ top: 0, left: 0 });
Your div is being positioned relative to its closest ancestor with position: relative or position: absolute. In order to position it relative to the page, you need to compute the total offset and apply that to your div. .offset() does all that for you.
Here's a demo illustrating what is going on: http://jsfiddle.net/gilly3/trSkC/
I have a div which has some stuff in it, and the user has the option of clicking an 'x' to say "This is not applicable to me", for example.
Rather than delete the div, I want to play a translucent div on top of it.
I started off with some complicated javascript to determine the size and location of my div in question, and create a new one on top of it. The script was giving a size and location which looked approximately right to my eye, but the overlap div was being put in the wrong spot.
Then I realised that there is (probably) a much simpler way to do this.
I put a div with class "blackout" inside the div I want to black out. The blackout css class has a visibility set to hidden, so javascript will set that to visible when needed.
The issue I'm having is that even with this method, I can't seem to get it to precisely fill the rectangle the parent div has.
I had
.blackout
{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: black;
opacity: 0.5;
filter: alpha(opacity = 50);
}
This filled up the whole screen rather than just the parent div.
What do I need to change to make it fill the parent div only?
This filled up the whole screen rather than just the parent div.
What do I need to change to make it fill the parent div only?
You need to add position: relative to the parent div.
That will set the parent div as the "containing block" for .blackout:
If the value of the position property is absolute, the containing
block is the nearest positioned ancestor—in other words, the nearest
ancestor whose position property has one of the values absolute,
fixed, or relative.
Read more here: http://reference.sitepoint.com/css/containingblock
Using "position:absolute" positions it in relation to the next "position:relative" div. If there isn't one set then it will use the body.
You need to make the parent div CSS contain "position:relative"
On the parent div's CSS:
overflow: hidden;
should work
Add position: relative to the parent div, overflow: hidden will only hide the outside of your parent's div
Change position: absolute; to position: relative;
Set the child <div> width and height to be 100% and remove useless markup.
http://jsfiddle.net/MvPHj/