更改style.top时图像不移动

时间:2022-11-11 12:35:01

When I execute that style.top statement, the image doesn't want to change 600 px from the top.

当我执行该style.top语句时,图像不希望从顶部更改600 px。

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.

从我的理解,这应该工作。我不知道发生了什么事。简而言之,如何使用JavaScript更改图像的位置?这是绝对的位置,但不确定。

2 个解决方案

#1


0  

The top, right, bottom, and left properties specify the position of positioned elements. -positionMDN

top,right,bottom和left属性指定定位元素的位置。 -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".

您的图像元素未定位,因此使用顶部,右侧,底部或左侧将无效。为了定位元素而不改变文档的流程(使用fixed或absolute会这样做)你可以使用position:relative;它将保留在文档流程中,而现在被视为“定位”。

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

什么是定位?默认情况下,元素以与HTML源中出现的顺序相同的顺序依次流动,每个元素的大小和位置取决于元素的类型,元素的内容以及元素的显示上下文。它将在页面上呈现。 HTML布局的默认流模型不允许对页面上元素的放置进行高级控制。通过将一小组CSS属性应用于为页面定义的元素,CSS可以通过提供精确坐标来控制元素的精确位置。 - 关于元素定位MSDN

#2


0  

The top property by itself does absolutely nothing. The elements needs to be positioned as well. For example, position: relative or position: absolute.

*酒店本身绝对没有。元素也需要定位。例如,position:relative或position:absolute。

The top, right, bottom, and left properties specify the position of positioned elements.

top,right,bottom和left属性指定定位元素的位置。

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:

单击段落后,图像相对于容器定位并更改top属性的示例:

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>

#1


0  

The top, right, bottom, and left properties specify the position of positioned elements. -positionMDN

top,right,bottom和left属性指定定位元素的位置。 -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".

您的图像元素未定位,因此使用顶部,右侧,底部或左侧将无效。为了定位元素而不改变文档的流程(使用fixed或absolute会这样做)你可以使用position:relative;它将保留在文档流程中,而现在被视为“定位”。

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

什么是定位?默认情况下,元素以与HTML源中出现的顺序相同的顺序依次流动,每个元素的大小和位置取决于元素的类型,元素的内容以及元素的显示上下文。它将在页面上呈现。 HTML布局的默认流模型不允许对页面上元素的放置进行高级控制。通过将一小组CSS属性应用于为页面定义的元素,CSS可以通过提供精确坐标来控制元素的精确位置。 - 关于元素定位MSDN

#2


0  

The top property by itself does absolutely nothing. The elements needs to be positioned as well. For example, position: relative or position: absolute.

*酒店本身绝对没有。元素也需要定位。例如,position:relative或position:absolute。

The top, right, bottom, and left properties specify the position of positioned elements.

top,right,bottom和left属性指定定位元素的位置。

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:

单击段落后,图像相对于容器定位并更改top属性的示例:

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>