css 如何在网页上移动我的图片？[已关闭]

at0kjp5o 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(147)

已关闭，该问题需要details or clarity，目前不接受回答。
**想要改进此问题？**通过editing this post添加详细信息并澄清问题。

15小时前关门了。
Improve this question
我尝试在这个最小可复制示例中移动图像：

div {
  margin-top: 2000px;
  margin-left: 500px;
}

<html>

<head>

</head>

<body>
  <div><img src="images/image-qr-code.png"></div>
</body>

</html>

我试着用相对位置来移动它，但是在移动图像父元素时遇到了困难。填充不起作用。那么我该怎么办呢？

css

来源：https://stackoverflow.com/questions/75952388/how-do-i-move-my-image-around-my-webpage

2条答案

按热度按时间

wn9m85ua1#

HTML对象对齐到页面的右上方并向下层叠，类似于在Microsoft Word中写入。如果要向下移动对象，则必须为它提供margin-top。如果要向右移动对象，则必须为它提供margin-left。这将在父元素中向下推对象，或者在父元素中向右推对象。
有数百种更好的方法可以做到这一点。就像在Microsoft Word中一样，页面上的对象“保持空间”。如果您将一个对象向下推并留出边距，则它后面的每个对象都将位于该对象的下方。如果您将其向右推，则其他对象都不会向右移动，但它们将直接填充在所讨论的对象下方。
Margin和padding是两种不同类型的间距属性。Margin将对象推离其他对象，而padding为对象添加空间。您可以用一个非常愚蠢的比喻来思考这一点，我多年来使用了很多：margin是社交距离，padding是你穿的一件蓬松的大衣。就像某人在排队一样，你可以通过社交距离让自己远离前面的人（margin）和后退一步。你也可以让你后面的人后退一步。你不能做的是告诉你前面的人向前挪一点。有了margin，你可以把一个物体向下推，或者把后面的物体推离它们。如果你想更好地理解左边距和右边距，想象这条线是音乐会的，它环绕着建筑物的侧面。你的左肩接触到建筑物。你可以选择远离建筑物的左侧，但是如果你试图与右边的任何东西保持社交距离，什么也不会发生，因为那里什么也没有。
如果左边有页边距，则可以将对象进一步推到右边，但如果在右边添加页边距，则不会有任何作用，除非旁边有另一个对象。
现在，填充物就是那件蓬松的大夹克。你可以穿上一件巨大的蓬松的米其林男装夹克，人们不会进入夹克占据的空间。不过，它也会让你变得更大。你可以既有社交距离，又有一件巨大的蓬松夹克，或者只是蓬松夹克，或者只是社交距离。它们会让排队的其他人远离你。只要在你和其他排队的人之间创造出相同的空间，就没有比另一个更好或更差的了。话虽如此，其他事情影响你的方式会改变。例如，如果有人把一桶油漆倒在你身上，如果你穿着蓬松的夹克，比你不穿蓬松的夹克，你需要更多的油漆来覆盖你。
在隐喻的这一部分中，如果您将background-color放置在带填充的对象上，则使用填充创建的间距和对象本身都将通过样式进行着色。
所以，所有这些都是说，你可能不想使用margin和padding来移动你的对象，相反，你可能想使用position。
Position: absolute就像是把你变成了队列中的幽灵。你不再占据队列中的一个位置，你后面的人会上前取代你的位置，你可以自由地一直走到队列的前面，因为没有什么会阻止你。即使你一直走到前面，但是，你根本不会把第一个人往后移，因为你是一个幽灵。现在你还在排队的原因是因为这条线上有position: relative，这意味着你的位置是相对于你所在的那条线的。如果你在这条线上放一个大纸箱，上面有position: relative，那么你就是盒子里的幽灵，但是盒子会保持你在这条线上的位置。
位置：绝对;允许你从对象流中取出一个对象，但它不再有能力容纳自己的空间。你必须使用top: [value]; bottom: [value]; left: [value]; right: [value];来告诉它去哪里。你只需要使用top OR bottom和left OR right，除非你试图将某个东西居中。这些样式属性中的每一个都有一个值，一个静态值，比如10 px，或者一个相对值，比如percent（%）。如果你说，top: 10px; right: 50%; left: 50%;，那么你的位置：绝对;对象将从相对容器的顶部向下10 px，并在容器内水平居中。

.margin-parent, .padding-parent, .position-parent {
width: 200px; 
height: 200px;

background: wheat;
border: 1px solid blue;
}

.margin-elem {
width: 40px;
height: 40px;
margin-top: 40px;
margin-left: 40px;

background: pink;
border: 1px solid red;
}

.padding-elem {
width: 40px;
height: 40px;
padding-top: 40px;
padding-left: 40px;

background: pink;
border: 1px solid red;
}

.position-parent {
position: relative;
}

.position-elem, .position-sibling {
width: 80px;
height: 80px;

border: 1px solid red;
}

.position-elem {
position: absolute;
top: 40px;
left: 40px;

background: rgba(255, 0, 0, 0.3); /* transparent red */
}
.position-sibling {
background: rgba(0, 0, 255, 0.3); /* transparent blue */
}

<div class="margin-parent">
  <div class="margin-elem"></div>
</div>

<div class="padding-parent">
  <div class="padding-elem"></div>
</div>

<div class="position-parent">
  <div class="position-elem"></div>
  <div class="position-sibling"></div>
</div>

还有其他的方法可以做到这一点，但是这取决于你页面中其他地方的情况，例如，如果你想使用flexbox，你可以这样做，但是仅仅使用flexbox把一个对象放在页面的底部是没有意义的。
如果你想让对象在你滚动的时候停留在页面上的一个地方，你可以使用position: fixed;，就像Stack Overflow上的导航栏一样（上下滚动，搜索栏停留在同一个地方，那就是position：fixed;）
你也可以使用position：多个元素上的绝对值。

赞(0）回复(0）举报 2023-04-08

ckocjqey2#

要移动图像，你需要使用CSS position .类似这样的东西。

div {
  position: relative;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
}

<html>

<head>

</head>

<body>
  <div><img src="images/image-qr-code.png"></div>
</body>

</html>

现在你可以设置你想要的每个方向的值。

只是注意到方向是相反的，所以当你用left移动一个项目时，意味着它会向右移动，相反的方向。

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何在网页上移动我的图片？[已关闭]

2条答案

相关问题

热门标签

最新问答