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以上的浏览器


相关文章
|
27天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
25 0
|
2月前
|
前端开发
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
29 5
|
3月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
3月前
|
前端开发 容器
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
99 2
|
3月前
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
59 0
|
3月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
151 0
|
4月前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
160 3
|
5月前
|
前端开发 开发者
CSS属性选择器:精确定位元素的利器
CSS属性选择器:精确定位元素的利器
|
5月前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)