码迷,mamicode.com
首页 > Web开发 > 详细

css position(定位)

时间:2017-03-29 21:13:21      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:form   计算   rtl   地址   窗口   font   ecif   未定义   优先   

一个定位元素(positioned element)是其计算位置属性为 relativeabsolutefixed 或 sticky 的一个元素。

相对定位元素(relatively positioned element计算后位置属性为 relative的元素。

绝对定位元素(absolutely positioned element)计算后位置属性为 absolute 或 fixed 的元素。

粘性定位元素stickily positioned element计算后位置属性为 sticky 的元素。

toprightbottom, 和 left属性确定定位元素的位置。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法.

定位方法:Static定位、Fixed定位、Relative定位、Absolute定位、Sticky定位。

语法

/* 关键字 值 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
// sticky  

/* 全局值 */
position: inherit;
position: initial;
position: unset;

取值

static该关键字指定元素使用正常的布局行为,即元素在文档流中当前的布局位置。此时 toprightbottomleft 和 z-index 属性无效。

relative该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。

absolute不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

fixed:不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的栈上下文。当元素祖先的 transform  属性非 none 时,容器由视口改为该祖先。

sticky :盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

通俗来说:

Static定位:HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

Relative相对定:相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

Fixed固定定位:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

Absolute绝对定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。Absolutely定位使元素的位置与文档流无关,因此不占据空间。Absolutely定位的元素和其他元素重叠。

Sticky粘性定位:粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时,始终处于 A 的下方。而在开始滚动 B 部分时,B 的头部会固定在屏幕顶部,直到所有 B 的项均完成滚动后,才被 C 的头部替代。

须指定 toprightbottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

注解

对于相对定位元素,top 和 bottom 属性指定它相对于正常位置的垂直偏移,left 和 right 属性指定水平偏移。

对于绝对定位元素,toprightbottom 和 left 属性指定元素相对于其包含块的偏移,即此时位置为与包含块的相对位置。元素的边距(margin)定位在这些偏移之中。

在大多数时候,绝对定位元素的 height 和 width 属性的值为 auto,它们会自动计算以适合元素的内容。但是非替换(non-replaced)绝对定位元素可以占据 top 和 bottom 的值(除 auto 外)所共同指定的可用空间,而不必设置 height(也就是设其为 auto)。leftright 与 width 也类似。

绝对定位元素的定位值发生冲突时的解决方法:

  • 如果同时指定 top 和 bottom(非 auto),优先采用 top
  • 如果同时指定 left 和 right,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用 right

重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面),一个元素可以有正数或负数的堆叠顺序。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

 

参考地址:

css position(定位)

标签:form   计算   rtl   地址   窗口   font   ecif   未定义   优先   

原文地址:http://www.cnblogs.com/guorange/p/6641515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!