css定位锚点透明

简介: css定位锚点透明

一、position 定位属性和属性值

position 定位属性,检索对象的定位方式

语法: position: static /absolute/relative/fixed/sticky/unset/inherit(未设置是inherit和initial的结合)/initial(最初的,初始的)

取值:

1、static: 默认值,无特殊定位,对象遵循HTML原则;

2、absolute: 绝对定位,将对象从文档流中完全拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据《浏览器》进行定位,而其层叠通过z-index属性定义3、relative : 相对定位遵循正常的文档流,将依right,top,let,bottom (相对定位)等属性在正常文档流中相对自身位置进行偏移,其层叠通过2-index周

性定义.

4、fixed:(固定定位),类似于绝对定位的方式,但是它的参照物是浏览器的“可视”窗口,且脱离标准文档流:5、sticky:(粘性定位)相对离自己最近且有滚动条的父元素做的定位

粘性定位,该定位是相对定位和固定定位的结合,在跨越特定闯值前类似相对定位,之后类似固定定位

二、定位元素的层级属性

z-index : auto number 设置定位对象的层香顺序

auto: 默认值。遵循结构,后写的定位元素层的顺序靠上。

number:无单位的整数值。可为负数,数值越大,层的顺序越靠上

说明:

此属性仅仅作用于 position 属性值 relative 或 absolute,fixed ,sticky的对象

三、包含块的概念及作用

包含块是绝对定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考,默认状态下,浏览器是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含元素块后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置.

定义元素为包含块: 给绝对定位元素的父元素添加声明position: relative;

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置

绝对和相对定位的区别

1、参照物不同,绝对定位 (absolute) 的参照物是包含块 (父级),相对定位的参照物是元素本身位置

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

四、锚点连接的语法和应用场景

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

锚点链接语法:

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

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

2)命名锚记连接

语法: 链接文本或图片

五、透明写法

IE9以下浏览器写法: filter:alpha(opacity=value);取值范围 0-100之间的整数值

兼容其他浏览器写法: opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9---1)

rgba(255,255,0,0.5)(最后一位值表示透明,取值范围0-1) 只支持IE8以上的浏览器


相关文章
|
3月前
|
前端开发 容器
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
38 2
|
4天前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
6天前
|
前端开发 容器
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
20 2
|
1月前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
37 3
|
2月前
|
前端开发 开发者
CSS属性选择器:精确定位元素的利器
CSS属性选择器:精确定位元素的利器
28 4
|
2月前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
1月前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
10 0
|
1月前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
16 0
|
2月前
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
|
2月前
|
移动开发 前端开发 HTML5
CSS3 定位
CSS3 定位