网页设计图片定位 第1篇
接下来学习绝对定位。
注释掉相对定位的样式代码。给 box2 添加样式 position: absolute，让它绝对定位。
在浏览器里观察效果，盒子1 怎么消失了？原来，当一个容器为绝对定位时，它会脱离文档流，盒子2 盖在了盒子1 的上面。
给 box2 添加样式 left: 50px，top: 50px。
再看看效果，盒子 1 显露出来了，盒子2 向右和向下各偏移了 50px，盖在了两个盒子的上面。
网页设计图片定位 第2篇
回到 css，给外部容器 container 声明样式 display: inline-block，margin-top: 100px，margin-left: 100px，让它向下向右偏移 100px 的距离。显示属性设置为 inline-block，是为了防止margin 塌陷。
再仔细观察一下效果，盒子2 的确是相对于窗口左上角发生了位移，窗口对应的元素就是body 了。这说明，默认情况下，绝对定位的参照点是 body 元素的坐标起始点。
网页设计图片定位 第3篇
你也可以使用 CSS 把图片嵌入网站中（JavaScript 也行，不过那是另外一回事了）。CSS 属性 background-image 和其他的 background-* 属性是用来控制背景图片的。比如，要想为页面中的每个段落设置一个背景图片，你可以这样做：
按理说，这种做法相对于 HTML 中插入图片的做法，可以更好地控制图片和设置图片的位置，那么为什么我们还要使用 HTML 图片呢？如上所述，CSS 背景图片只是为了装饰——如果你只是想要在你的页面上添加一些漂亮的东西，来提升视觉效果，那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别，等等。这就是 HTML 图片有用的地方了。
总而言之，如果图像对你的内容有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图片。
备注：你可以在 CSS 模块里学到更多关于 CSS 背景图片的知识。
我们已经了解到可以使用 元素显示静态图像，或者通过使用 background-image 属性来设置 HTML 元素的背景。你还可以动态生成图形，或在生成后对图像进行操作。浏览器提供了使用代码创建 2D 和 3D 图形的方法，以及包含来自上传文件或用户摄像头实时流的视频。以下是有关这些更高级图像主题的文章链接：
元素提供了使用 JavaScript 绘制 2D 图形的 API。
你可以借助可缩放矢量图形（SVG）来使用线条、曲线和其他几何形状来渲染 2D 图形。借助矢量图形，你可以创建能够以任意尺寸清晰缩放的图像。
WebGL API 指南将帮助你入门 WebGL，这是用于 Web 的 3D 图形 API，可让你在 Web 内容中使用标准的 OpenGL ES。
与 类似，你可以使用 HTML 将 和 嵌入到网页中，并控制其播放。
WebRTC 中的 RTC 代表实时通信（Real-Time Communications），这是一种可以在浏览器客户端（对等方）之间进行音频/视频流和数据共享的技术。
你已经阅读完本文，但你能记住重要的信息吗？在继续之前，你可以进行一些进一步的测试，以验证你是否掌握了这些信息。请参阅技能测试：HTML 图像。
到此为止，我们已经详细介绍了图片和说明文字，在下篇文章中，我们将进一步看看如何使用 HTML 在网页上嵌入音频和视频。
网页设计图片定位 第4篇
相对定位：相对自身原来的位置进行偏移
偏移设置：top、left、right、bottom
相对定位元素的规律：
绝对定位：偏移设置可以left、right、top、bottom
相对于最近的上一个已经定位的元素发生位置的变化
绝对定位小结：
经验:设置了绝对定位但是没有设置偏移量的元素将保持在它原来的位置。在网页制作中可以用于需要使某个元素脱离标准，而仍然希望他在原来位置的情况
需求：
position: relative; /将大的盒子设置为相对定位/
position: absolute; /绝对定位/
top、bottom、left、right
fixed：设置偏移left、right、top、bottom
类似于绝对定位，不过区别在于定位的基础不是祖先元素，而是浏览器窗口