相对位置 - 是什么呢？ 详细说明

嵌套HTML - 一个漫长的过程，严谨，而且非常有创意。 尽管对于大多数的IT就业人员，网页布局可能看起来枯燥的常规，谁拥有这样的情况下，职业专家，不仅质量上执行任务，但也从有形快乐的过程中获得。

但是，你成为一个有经验的编码器之前，每个新人花了很多时间研究各种指令和两个HTML语言的规范，并在其盟友 - CSS。 究竟 是什么CSS， 它是什么，什么是“虚晃耳朵”让你起床，以及其顶部的一个属性-位置相对的-今天我们将讨论。

CSS是什么？

CSS缩写可以转录和翻译成俄文为“层叠样式表”。 这听起来很奇怪 - 一方面是，它似乎很清楚，和文字，并在其他 - 一般的意义不是立即捕获。 让我们先从简单的 - 与风格。 这项技术可以让你附加关于外观，你只能注册一次，并使用无数次的页面上的对象，某些特性。

在正式翻译单词“表”，几乎出现了意外 - 其实更合适的位置将用“列表”或“名单”，但是原文翻译的作者决定，CSS看起来比列表多了，我们是谁例如，现在尝试。

最后，单词“瀑布”。 事实是，每个元素可以具有几种样式能够混合或者甚至重叠。 在这种情况下，浏览器必须采取一系列的规则，以组成块，这竟然是几种风格，其中一人，例如，有一个位置相对属性的外观，另 - 位绝对。 事实上，这种冲突是无法容忍的，但在大型项目这样的困惑常有发生。

所以现在，当一切都从名字清楚，让我们看一个简单的例子。 比方说，您的网站应该有大量的按钮，以一定的方式设计。 他们有诸如大小，阴影，不透明度，颜色属性。 当然，你可以指定这些参数，创建每个按钮，但更容易使用CSS。 在实践中，你需要描述某一类，其中列出了所有上述属性的值，然后，而不是一个长长的清单，每个按钮的标签将只需要指定类的名称，然后在浏览器本身将颜色在所需的颜色，这些元素并给他们一个正确的“光泽”。

什么Position属性？

现在，我们直接进入物业位置上，其中启动这一整篇文章的缘故。 如果你熟悉英语，还是有很好的直觉，那么你应该已经很明显 - 这个属性是负责该项目的位置。 事实上，它是，而是确定具体位置的方式，这个属性告诉浏览器如何应置于一种或另一种元素相对于相邻或跨页作为一个整体。

哪些值可以Position属性？

我们的物业能接受几个不同的值，只有5。 下面是每个的简要说明：

• 位置继承。 此功能允许您将数据复制上是父元素的位置。 举例来说，如果你有一个div与指定位置相对，然后进入它与IMG继承价值也将被设置为相对的。
• 位静止。 该值会自动给所有元素，除非另有说明，任何更多。 元件装配到位置如在代码中提到和不可用于各种“廉价”的，从而允许改变它们的位置。
• 位置绝对。 通过这个值的位置属性在有必要创建一个“浮动的”元素的情况下经常使用。 随着房地产项目的给定值是页面的其他组件“隐形”。 也就是说，他们被安排为，如果我们的绝对元素不存在。 他自己总是会在地方，无论多远，被滚动页面。
• 位置固定。 在许多方面，这个值是类似于前面的一个，然而，而绝对元素绑定到父，固定只使用浏览器屏幕的左上角的坐标，而忽略它之前的元素的其余部分。
• 最后，相对位置。 这种类型的值允许相对于其它，它可以是所谓的标记在共同的“橡胶”，用于创建自适应有用的定位元件。 有了这个特性，该项目将“推”另一方面，又不失更改页面上的位置的能力。

在不同的浏览器的位置工作

并非所有的浏览器都同样兼容。 虽然上网冲浪最另类的程序不被感知位置的任何有价值的挂钩是绝对真实的，“长期特殊»Internet Explorer中考虑的财产，这取决于它的版本。

例如，使用已经“埋”的浏览器IE6，你不能使用固定的值，并继承 - “驴”他们根本不理它。 然而，尽管形势的第七版开始好转，并已固定处理，以继承心爱的“浏览器下载其他浏览器，”仅在第8版达到了。

观察员其余冷静处理与位置的第一个版本，使用Opera例外，这已经得到了性能的支持，其4度的变化，发表在90年代中期。

在JavaScript中的位置工作

事实上，如何使用JavaScript中的位置属性的工作故事，我们只包括了礼仪的缘故。 正是由于这一特性并没有在标题中的任何特殊字符，你可以使用JS没有任何改变，例如，设置DIV位置相对，应该包括这样一行：div.style.position =“亲戚”。

正如你所看到的，这是很简单的。

为什么位置相对优点特别关注？

虽然大多数的属性值的位置的，说得客气一点对周围的元素，“口水战”，使用值“的风格定位：相对”的，应该永远记住关于整个网页作为一个整体，因为使用不当可能强烈“扭曲”屏幕的全部内容。

此外，该酒店只让你轻松转换固定的设计适应性，因为它的应用程序会自动影响到所有的内容页面。 然后，我们还有时间去考虑使用此值的例子和错误，你会看到在实践中其有形的意义。

当你应该使用相对定位？

除了网页HTML的传统布局，位置相对通常用于创建各种有趣的效果。 例如，如果你想要的东西页上的“来了”，或者相反，逐渐超越其领土去，恰恰是这个属性可以帮助你实现这个“绝招”。

这些“招数”通过JavaScript实现的，或者，如果你的目标是为逐步实行，通过CSS3的特性，它允许您调整特定变量的值的周期性变化。

此外，在某些情况下可能产生的“混合”值的位置相对。 CSS，虽然不是在同一时间允许您设置类似职位：，但是通过使用一些技巧相对绝对的，它仍然有可能达到这样的效果。 在这里你需要创建复杂的东西像这种方法可能的情况下非常有用的工具提示或弹出式菜单。 考虑的例子中，我们将给出这样的的结构的描述的“混合”。

使用相对排名的例子

相对位置 - 这是很简单的，但灵活的工具，可以让你实现各种有趣的效果。 为了不浪费时间和地点写无用的代码模板，我们提出了一些口头的算法，它可以装点您的网站或特定页面。

让我们先从“跑出来”行。 假设你有需要，将“旅行”，因为在屏幕的左边缘，慢慢地将其移动到右侧的元素。 为了实现这种“机制”应该设置的位置是：相对的; 左：-100px，其中-100 - 构成块宽度的像素的近似数量。 这种风格将允许您隐藏单元的屏幕之外，将其放置在“起始位置”。 现在你可以使用一个脚本，将离开单位的属性值，只要它不成为等于浏览器窗口的宽度减去元素的宽度每隔几毫秒增加。 其结果是，出来的左边缘，在屏幕上推出，并在他的右手“停”单位。

另一个例子允许你创建“相对绝对”的元素。 例如，您可以输入绝对内的另一个，其位置相对。 其结果是，我们有一个“相对”块没有到绝对刻大小，现在可以体现在独立前一个元素的位置。

使用位置相对时的典型错误

使用位置相对时最常见的错误是，很多网页设计者忘在单位保留一个地方的能力，这可以位于任何地方。 举例来说，如果你有一个相当大的，放置在屏幕的并具有相对定位之外，在它的位置将是一个敞开的“洞”。 然而，即使此属性有时会造成一定的不便，可以使用为好，例如，创建的部位，在那里它的所有块被逐渐放置在顶部位置的“自组装”的一个有趣的效果：0; 左：0; 吨。即原来的位置。