CSS快速学习7：定位锚点

定位锚点：

一、position 定位属性，检索对象的定位方式；

语法：position：static /absolute/relative/fixed

取值：

1、static：默认值，无特殊定位，对象遵循HTML原则；

2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象(浏览器)，而其层叠通过z-index属性定义；

3、relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；

4、fixed：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范；

值	描述
static	默认。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方
absolute	相对于父级元素的绝对定位，浮出、脱离文档流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位，则以html、body，浏览器的位置为相对位置。
fixed	相对浏览器的绝对定位，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

二、绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；

默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

四、定位元素层叠属性：

z-index : auto |number

检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象

number:无单位的整数值。可为负数

说明：

较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。

此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。

嵌套关系中，父级容器默认在低一层，不用设置z-index；给子容器设置负值就可以让父级在子容器上层显示。

五、命名锚点链接的应用

定义：

是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点链接的应用：

1)命名锚点的作用：在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法：<标记 id="命名锚记名"> </标记>

3)命名锚记连接

语法：<a href="#命名锚记名称"></a>

CSS快速学习7：定位锚点相关推荐

CSS快速学习（2021.2.7-15）
注意: 这波是赶作业,所以看的速成视频.(从win32到electron到html和css,假期过大半东西还没做出来555) 仍旧是众所周知的学习网站:b站,找到了DasAutoooo老师的视频. 学 ...
CSS快速学习：几种导航条案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
CSS快速学习9：浏览器兼容
五大浏览器内核 •Trident (MSHTML) (三叉戟:三叉线:三齿鱼叉) •Gecko (壁虎) •Presto ( 迅速的) •Webkit (Safa ...
CSS快速学习8：圆角切图、滚动条和图片整合技术
圆角切图 1.css 书写 border-radius:左上角右上角右下角左下角 border-radius:左上角右下角右上角左下角(对角线) border-top- ...
CSS快速学习6：vertical-align讲解
Vertical-align属性设置元素的垂直对齐方式. 说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性 ...
CSS快速学习5：文本溢出和XHTML元素分类
文本溢出 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/sroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会出现在元素框之外: ...
CSS快速学习4：浮动和盒模型
浮动属性: Float:定义网页中其他文本如何环绕该元素. 有三个属性值: left:元素活动浮动在文本左面: right:元素浮动在右面: none:默认值,不浮动. 浮动的三大显著特征: 1.di ...
CSS快速学习2：选择符权重和字体类属性
选择符的权重: CSS中用四位数字表示权重. 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符 ...
CSS快速学习10：高度自适应
高度自适应网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应. 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同 ...

CSS快速学习7：定位锚点

CSS快速学习7：定位锚点相关推荐

最新文章

热门文章