css图片位置改变过度效果_CSS位置：绝对的，过度使用的

css图片位置改变过度效果

Developers who know just enough CSS to get them into trouble, along with obsessive, pixel-perfect designers, tend to jump on position: absolute as a godsend. “At last!“ they exclaim. “I can position everything on my web page exactly where I want it!“ Unfortunately they ignore several important points, and almost inevitably get wrapped up in two consequences that rapidly become an overwhelming labyrinth.

那些只了解CSS足以使他们陷入困境的开发人员，以及那些痴迷且像素完美的设计师，往往会跳槽position: absolute是天赐之物。 他们大喊：“终于！” “我可以将所有内容准确地放置在我的网页上！”不幸的是，他们忽略了几个要点，几乎不可避免地陷入了两种后果，这些后果很快就成为迷宫般的迷宫。

First, let’s see what position: absolute does to our page. Our code becomes:

首先，让我们看看什么position: absolute对我们的页面有影响。 我们的代码变为：

<p><img src="assets/images/pericles.jpg" 
style="absolute; top: 0; left: 30px;" alt="Bust of Pericles">
Pericles was a prominent statesman, orator, and naval general of Athens 
during the city-states's <q>Golden Age</q>, from 448BCE until his death 
in 429.  Pericles was a promoter of the arts (particularly plays), 
architecture (it was under his patronage that the Parthenon was built), 
and the principles of democracy, but he was also an instigator of war:
Pericles is widely held to be responsible for maneuvering Athens 
into the disastrous Peloponnesian  War with Sparta.</p>

When position: absolute is applied, neither float nor margin make any difference, so they have been removed from our inline style. absolute causes our image to be taken out of the flow of the document completely, lifted up and above the rest of the content, which now slides underneath it. Essentially, the rest of the web page acts like the image is not there at all.

当应用position: absolute时， float和margin都没有任何区别，因此它们已从我们的内联样式中删除。 absolute会使我们的图像完全从文档流中取出，并被抬高并高于其余内容，该内容现在滑到文档下方。 本质上，网页的其余部分就像根本没有图像一样。

So why do people use position: absolute? Because with absolute on, the position of the element is measured from the top left corner of its parent containing element: in our case, the body.

那么人们为什么要使用position: absolute ？ 因为与absolute上，该元件的位置被从所测量的top left包含的元素的父的角：在我们的情况下， body 。

position: absolute becomes very attractive, as it appears to promise pixel-perfect positioning of everything on our web page. This is an especially seductive proposition to traditional designers in the desktop publishing and print industries, who are used to being able to control the position of everything on an A4 page, and to whom fluid designs are an anathema. However, they neglect to note several points:

position: absolute非常有吸引力，因为它似乎可以保证我们网页上所有内容的像素完美定位。 对于台式机出版和印刷行业的传统设计师来说，这是一个特别诱人的主张，他们习惯于控制A4页面上所有内容的位置，而流畅的设计却使他们感到厌恶。 但是，他们忽略了以下几点：

1. The web is not a legal-sized piece of paper. Monitors, browsers and devices have different sizes, aspect ratios, and resolutions. Placing absolute position on an element tends to force a series of assumptions on the user that corrodes the flexibility of the web.

   网络不是合法尺寸的纸。 监视器，浏览器和设备具有不同的大小，宽高比和分辨率。 将absolute位置放置在一个元素上往往会给用户带来一系列假设，从而削弱了网的柔韧性。

2. Once you apply position: absolute to one element, you’ll usually find yourself applying it to everything else on the page. Because position: absolute takes the element out of the flow of the document, everything else has to be adjusted to compensate for it, to make sure that elements don’t overlap where you don’t want them to. This tends to lead to increasingly complex CSS that breaks as soon as new content is added to a page. (Again, the web is not an unchangeable printed page: revisions and additions occur constantly, and your design should be flexible enough to accommodate those alterations.) Using position: absolute tends to set things in concrete, making changes extremely time-consuming.

   将position: absolute应用于一个元素后，通常会发现自己将其应用于页面上的其他所有内容。 因为position: absolute将元素从文档流中移出，所以必须对其他所有元素进行调整以进行补偿，以确保元素不会在您不希望重叠的位置重叠。 这往往会导致越来越复杂CSS，一旦将新内容添加到页面中，CSS就会崩溃。 (同样，网络不是不变的印刷页面：不断地进行修订和添加，并且您的设计应足够灵活以适应这些更改。)使用position: absolute倾向于将内容设置为具体的东西，从而使更改非常耗时。

So why use position: absolute at all? Well, applied judiciously, it can be a very useful way of overlapping separate elements that might otherwise have to be merged into one image, adding time and limiting flexibility in your design.

那么为什么要使用position: absolute呢？ 好吧，明智地应用它是重叠单独元素的一种非常有用的方法，否则这些元素可能必须合并为一个图像，从而增加了时间并限制了设计的灵活性。

For example, let’s say that you wanted to expand an article on Pericles to include other major figures of the Athenian Golden Age. You have several images: busts of Aeschylus, Plato, and Alcibiades. You would like to have these on the right-hand side of your document, overlapping with each other.

例如，假设您想扩展有关Pericles的文章，以包括雅典黄金时代的其他主要人物。 您有几张图片：Aeschylus，Plato和Alcibiades的胸像。 您希望将它们放在文档的右侧，彼此重叠。

One solution would be to take the images into PhotoShop, merging them together as one picture. However, that removes any ability to easily change the order, alignment, or spacing of each individual image – you would have to go back into the original composite PhotoShop document, make your changes, re-export, and likely re-upload your image. Instead, let’s keep the busts as individual images, and place them inside a <div>. The HTML code is:

一种解决方案是将图像放入PhotoShop，将它们合并为一张图片。 但是，这消除了轻松更改每个单独图像的顺序，对齐方式或间距的任何功能–您将不得不返回原始的合成PhotoShop文档，进行更改，重新导出，并可能重新上传图像。 相反，让我们将半身像保留为单独的图像，并将其放置在<div> 。 HTML代码是：

<div id="greek-figures">
	<img src="aeschylus-bust.jpg" alt="Marble bust of Aeschylus" id="aeschylus">
	<img src="plato-bust.jpg" alt="Marble bust of Plato" id="plato">
	<img src="alcibiades-bust.jpg" alt="Marble bust of Alcibiades" id="alcibiades">
</div>

As we know these images are all the same size, we don’t have to specify their height and width individually – instead, we will make that part of the CSS:

我们知道这些图像的大小都是相同的，因此不必分别指定其height和width ，而是将其作为CSS的一部分：

div#greek-figures {
	float: right; 
}
div#greek-figures img {
	height: 150px;
	width: 150px;
	position: absolute;
}

If you left the code at this point, you would find the <div> would collapse, only one image would be shown, and it would be off the page. Now: do you have any idea as to why?

如果此时离开代码，您会发现<div>会折叠，仅显示一张图像，并且该图像不在页面上。 现在：您对为什么有任何想法吗？

…waits …

……等待……

Answer: the images, being positioned absolutely, are taken out of the flow of the page, and no longer push anything around. The div, being floated, tries to determine its width from the content it contains – but because that content (the images) is set to position: absolute, they don’t count… and as they are the only content of the <div>, effectively the <div> has no width. Finally, every absolutely positioned image inside the <div> is going to try to position itself in the very top left corner of this <div> with no dimension… meaning that they all stack on top of each other. Note that it is the last image inside the div that is on top of the others: this will become important later. For now, let’s try to fix the problems we have by modifying the CSS: <style>

答案：绝对定位的图像将从页面流中删除，并且不再推动任何操作。 浮动的div会尝试根据其包含的内容确定其宽度-但由于该内容(图像)已设置为position: absolute ，因此它们不计数…并且因为它们是<div>的唯一内容，实际上<div> 没有宽度。 最后， <div>每个绝对定位的图像都将尝试将其自身定位在该<div>最左上角，没有尺寸……这意味着它们全部堆叠在彼此的顶部。 请注意，它是div中位于其他图像之上的最后一个图像：稍后将变得很重要。 现在，让我们尝试通过修改CSS来解决我们遇到的问题：<style>

body p {
	text-align: justify;
}
div#greek-figures {
	float: right;
	width: 250px;
	height: 450px;
	margin-left: 2em;
}
div#greek-figures img { 
	height: 150px;
	width: 150px;
	position: absolute;
}
img#plato {
	top: 155px;
	right: 15px;
}
img#alcibiades { 
	top: 290px;
}

(We have provided a height to the div as the absolutely positioned images inside it don’t contribute to that either; and without a height, our page’s paragraphs have nothing to wrap around. The text alignment and margins are just to make a nicer presentation. )

(我们为div提供了一个height ，因为它里面的绝对定位图像对此没有任何帮助；并且没有height ，我们页面的段落就没有任何内容可以环绕。文本的对齐方式和边距只是为了使演示更好)

This works well, but you’ll discover something a little odd: if you change the right property of the plato image to left, you don’t get what you might expect:

这很好用，但是您会发现一些奇怪的地方：如果将plato图像的right属性更改为left ，那么您将无法得到预期的结果：

Instead of measuring its position from its container, the image is judging itself against the ultimate container, the <body>. We can get around this by exploiting an under-appreciated rule in CSS positioning:

图像没有从容器中测量其位置，而是根据最终容器<body>.自我判断<body>. 我们可以通过在CSS定位中利用未被重视的规则来解决此问题：

div#greek-figures {
	float: right;
	width: 250px;
	height: 450px;
	margin-left: 2em;
	position: relative;
}

Which changes our layout to what you see on the right.

这会将我们的布局更改为您在右侧看到的布局。

The rule is this: if an absolutely-positioned element is contained inside another element with position: relative applied, the inner element must measure its position against the top left corner of its container. Otherwise the position of the element will be measured against the top left corner of the body.

规则是这样的：如果绝对位置的元素包含在另一个具有position: relative的元素内，则内部元素必须 position: relative于其容器的左上角测量其位置。 否则元素的位置将针对被测量top left的拐角body 。

In general, if you insist on using position: absolute, it is a good idea to wrap multiple elements that are positioned absolutely in a containing “canvas“ – which could be a <div> or the <canvas> element.) Doing so allows you to move it around with the reassurance that absolutely positioned elements contained within it will move in harmony with their container.

通常，如果您坚持使用position: absolute ，则最好将多个绝对定位的元素包装在一个包含“ canvas”的画布中，这些元素可以是<div>或<canvas>元素。)这样做可以您可以放心地移动它，其中包含的绝对定位的元素将与其容器协调地移动。

翻译自: https://thenewcode.com/135/CSS-Positioning-absolute-the-overused

css图片位置改变过度效果