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>
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the point of CSS collapsing margins?
(1 answer)
How to disable margin-collapsing?
(12 answers)
Closed 3 years ago.
I've never read anything to suggest that the overflow property of an element would have the strange effect on element positioning that I'm seeing here:
https://codepen.io/kshetline/pen/ZEzLVxN
Toggle the toggle button in the example, and watch how somehow the background of a <div> mysteriously slides upward, covering previous content, while its contents stays in the same screen-relative place (meaning the content is moving lower relative to its parent's background).
The example is a very simplified version of something I'm trying to do with an Angular component that's meant to scale its <ng-content> — but the example is only CSS and HTML with a tiny touch of JavaScript, no Angular, since I'm trying to isolate the relevant variables.
The content of an HTML element can be scaled down using transform: scale( less-than-1 scaling factor ), but even though the content of the element is rendered smaller, by default the element's pixel dimensions remain the same, with the content (unless otherwise specified) shrinking toward the center of the element, and blank space left around that content that leaves the element at its original unscaled dimensions..
You need to compute negative margins that match the degree of scaling in order for the element itself to be considered smaller. I've done that, but I've found that unless the container for the scaled element has CSS overflow set to hidden, some weird positioning can occur, as if the extra blank space required that's supposed to be removed by the negative margins is still having some partial, hard-to-explain effect on the overall layout of other elements.
I'm seeing this behavior in Chrome, Firefox, Safari and Edge -- so I'm guessing it's "proper" CSS behavior, but it makes no sense to me, and I'm hoping someone can explain what's going on. I'd like to be able to keep overflow set to visible so that scaled content can still do things like show floating dropdown menus that don't get clipped at the boundaries of the element.
let hidden = true;
const inner = document.getElementById('inner')
function toggleOverflow() {
hidden = !hidden;
inner.style.overflow = hidden ? 'hidden' :
'visible'
}
html, body {
height: calc(100vh - 10em);
}
.page {
font: 32px Arial, Helvetica, sans-serif;
height: calc(100% - 1em);
}
.container {
background-color: #ACF;
height: 100%;
}
.outer-wrapper {
background-color: rgba(187, 255, 204, 0.5);
font-size: 2em;
margin: 0 1em;
position: relative;
}
.inner-wrapper {
overflow: hidden;
position: relative;
width: fit-content;
}
.ng-content {
margin: -18.75px 0;
transform: scale(0.5);
}
.container-text {
display: inline-block;
position: absolute;
bottom: 1em;
}
<div class="page">
<button onclick="toggleOverflow()">Toggle Overflow</button><br>
Content outside of the<br>
panel being scaled and its<br>
containing <div>, 32pt font<br>
<div class="container">
<!--Angular component start tag goes here -->
<div class="outer-wrapper">
<div id="inner" class="inner-wrapper">
<div class="ng-content">
50% scaled content goes here, 64pt font
</div>
</div>
</div>
<!-- Angular component end tag goes here -->
<span class="container-text">This is an absolutely positioned <span> in the same <div></span>
</div>
</div>
From CSS 2.2 spec
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
So adding overflow:hidden is stopping the margins from collapsing.
You have set a negative margin in your .ng-content. If overflow is set to hidden, it will hide the negative margin. Set the margin to a positive number and it will fix this jumping issue.
.ng-content { margin: 18.75px 0; }
If you are trying to change the height of the element up and down, try using max-height with overflow: hidden. When max height is set to 0, it will be hidden. When set to something like 500px, your content will show!
Follow-up...
I created a variant on my first code pen here:
https://codepen.io/kshetline/pen/WNeRmOo
In this case, I'm using transform-origin: top center when I scale, and putting all of the needed negative margin on at the bottom of the scaled element, rather than splitting it evenly between top and bottom. That eliminates the weird vertical position shifting.
overflow: hidden is still needed to hide the excess of background color from "leaking out" of its container, but in the (common) case where the background of the scaled element is transparent, there would be no visible effect from using overflow: visible instead, and no worries about clipped dropdown menus originating inside the scaled element.
Follow-up #2...
Here's the best solution, using padding: 0.05px to deal with the real issue that #Alochi helped me understand — stopping border collapse:
https://codepen.io/kshetline/pen/zYONgzV
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;.
I want this floating pane to be initially positioned 40px from the top of the parents position. The current result (shown in the JSFiddle) is top:140px instead of the intended top:40px.
<body class="tundra">
<div style="height:100px;background-color:blue;"></div>
<div style="position:relative;">
<div style="background-color:red;" class="paneClass"></div>
<div id="simplepane1"></div>
</div>
</body>
require(["dojox/layout/FloatingPane", "dojo/domReady!"], function(FloatingPane) {
var floatingPane1 = new FloatingPane({
class: "paneClass"
}, document.getElementById("simplepane1"));
floatingPane1.startup();
});
.paneClass{
position:absolute;
top:40px;
left:40px;
width:200px;
height:300px;
}
http://jsfiddle.net/9qqtbe4y/4/
You can see how the red div positions correctly relative to the parent but the floatingPane does not.
Parents position of the floating pane is 100px down from top (this 100px is the height of first div inside class "tundra"). So when it gets instruction of adding 40px more, it moves total 140px from top.
rewriting the HTML code as below, will solve the issue. the change is to set 1st div's position to relative
<div style="height:100px;background-color:blue;position:relative;"></div>
<div style="background-color:red;" class="paneClass"></div>
<div id="simplepane1"></div>
require(["dojox/layout/FloatingPane", "dojo/domReady!"],
function(FloatingPane) {
var floatingPane1 = new FloatingPane({
class: "paneClass"
}, document.getElementById("simplepane1"));
floatingPane1.startup();
});
.paneClass{
position:absolute;
top:140px;
left:40px;
width:200px;
height:300px;
}
This happens because the floating pane is built as an absolutely positioned element and it's styles are also meant to match that. So when setting 40px from the top of the relative box, it actually adds 100 based on it's parent. Depending on what you're trying to do with this, I would recommend not putting the floating pane inside a div that has an inherent top value. If you don't want the floating pane to ever overlap with the top bar, you can look into constraining it inside a box. Here (not mine) is an example that does just that.
If you don't want care about that, then simply removing the position: relative from the containing div and changing the default style of the floating div to be top: 140px; will also work.
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/
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.