CSS3 定位| Position研究

视区(视口)

当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域)。当我们调整视区大小时,UA 就有可能会改变文件上布局。

当视区比文件所呈现的Canvas 区域还小时,UA 可能会提供一个卷轴的机制来让您一窥文件的全貌。理论上每个Canvas 最多只能有一个视区,不过UA 可以产生一个以上的Canvas(例如在同一份文件上提供不同的可视区域, 如框架格)。

承载区块(包含块)

如果一些box的位置与大小是以其它相关的「矩行方块」的边缘(edges)来计算的话,我们就将这样的「矩行方块」称之为承载区块(Containing Blocks)。再简单的讲,所谓承载区块指的是,离「该元素」最近的区块级亲代元素;无论「该元素」的定位或者是浮动,皆是以它的承载区块来做参考基准(除了fixed定位方式)。

底下是一个简单的承载区块示意图(demo-two 的承载区块为demo-one)。

  • 当亲代元素为区块型元素时,其承载区块的大小是到内缘距离。
  • 当亲代元素为单列型元素时,其承载区块的大小是到内容边缘。

正常流向(正常流量)

什么是正常流向呢?由上而下、由左至右这样的走向就是所谓的正常流向;我们拿超文件标记语言来说好了,其原始码撰写的方向是从上而下由左至右,这就是正常流向。而浏览器也是依据这样的走向来解译(直译)我们的原始码。

换个角度来说,在大部分的情况下,正常流向指的是在网页里头,显示元素标签的方式。另外,多数的HTML元素标签都是属于inline box或blockbox。block box里可以包含inline box;反之,inline box里不能包含有blockbox

位置

所属的 设定值
位置
定位
静态 | 相对 | 绝对 | 中心 | 页 | 固定
预设2006/02/15:静态
适用于:除了表列组与表列之外的全部元素
继承性:无

用来将HTML元素所产生的box定位在我们想要让它呈现的位置上。

静态定位|静态位置的定位

依照撰写原始码时的顺序来定位。白话的讲就是依序我们撰写HTML元素所产生的box让它自然地排在原本流向应该在的位置上。static这个值不用特别去指定它,因为它是预设值,也就是说所有的box元素一开始通通在本来应有的位置上。并且不适用bottom、left、right与top这四个属性。

相对定位|相对位置的定位

相对于原本的位置(不是相对于其它的元素的位置)。将元素定位在相对 ??于原本的位置;该元素会移动到我们所定位的地方,而原本位置的大小会在承载区块中被保留。

绝对定位|绝对位置的定位

相对于承载区块的位置。该元素会从HTML的流向中移除,然后依据承载区块来重新定位给该元素应有的空间,而原本位置的大小会在承载区块中被清除。其亲代元素的定位值不可为static

固定定位|固定位置的定位

相对于浏览器视窗的视区座标,将位置固定住不再随卷轴的移动而改变。

下,左,右,顶部

所属的 设定值
底部框设定下方间距左侧设定框左边间距权设定右边间距箱顶盒设定上方间距

汽车 | < 长度 > | < 百分比 >
预设值:auto 
适用于:定位元素
继承性:无

这四个属性是用来设定已定位目标元素与承载区块的边界距离。须注意的是,这四个值均可设为负数;当为负数时,该元素的位置会跑到承载区块的边界外。

z-index值

所属的 设定值
z-index进行
?轴定位
汽车 | < 整数 >
预设值:auto 
适用于:定位元素
继承性:无

用来让元素之间相互堆叠覆盖。其值越大表示越上层 (也可使用负值)。

所属的 设定值
剪辑
修剪可视的范围
汽车 | < 形 >
预设值:auto 
适用于:绝对定位的元素
继承性:无

可见光范围内的体积包围剪内来修。

<shape>

  • RECT RECT(上,右,下,左)从元素的左上角开始剪出。
  • 插图 插图(上,右,下,左)类似于矩形方式,不过它是的从元素边界往内剪出

时间: 2024-10-01 06:57:40

CSS3 定位| Position研究的相关文章

CSS3定位和浮动详解

本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. css定位的属性: position 把元素放在一个静态的,相对的,绝对的,或者固定的位置中 top/left/right/botom 元素向上/左/右/下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素显示的对其方式 z-i

CSS3之position

1.取值 (1)absolute (2)fixed (3)inherit (4)relative (5)static (6)!important 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

定位--position属性

一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) 3.absolute:绝对定位 4.fixed:固定定位 二.相对定位元素的规律 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响 三.绝对定位-- absolute属性 1.偏移位置:left right

CSS3的position:sticky介绍

用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域.position:sticky为此而生. position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:rela

CSS.04 -- 浮动float、overflow、定位position、CSS初始化

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

css定位position认识

1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolute(表示绝对定位),作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动

人工智能领域中声源定位的研究与发展------第一章 绪论

1.1 引言 在人工智能领域中,听觉与视觉相比,仍旧处在一个初期阶段的研究课题.随着时代的发展,听觉已经成为人工智能领域中重要的研究课题.它是智能机器人的重要标志之一,也是实现人机交互,与环境交互的重要手段. 在之前机器人的导航主要使用测距传感器(如声纳),而跟踪和定位主要靠视觉.这种形式在视觉场景内被广泛作为定位目标的方式.但是像人和大部分动物那样,视觉场被限制在小于180度的范围内.在真实世界中,听觉能带来360度的"听觉场景".它能定位不在视觉场景内的声音目标,即定位由物体遮挡造

网页元素定位Position

 第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) static没有定位,以标准流方式显示 relative设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置.设置相对定位的盒子仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 设置了position属性值为relative的网页元素,无论是在标准流中还是在浮动流中,都不会对它的父级元素和相